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.10 to 1.0.11

dist\global\toolbar.js
ReadMe.md
styles/h-scroll/_fabric-definition.scss
styles/toolbar/_fabric-definition.scss

126

dist/es6/common/h-scroll.js

@@ -17,17 +17,14 @@ var __extends = (this && this.__extends) || (function () {

};
import { Component } from '@syncfusion/ej2-base/component';
import { Touch } from '@syncfusion/ej2-base/touch';
import { EventHandler } from '@syncfusion/ej2-base/event-handler';
import { NotifyPropertyChanges, Property } from '@syncfusion/ej2-base/notify-property-change';
import { createElement, detach, classList } from '@syncfusion/ej2-base/dom';
import { Touch, Component, EventHandler } from '@syncfusion/ej2-base';
import { NotifyPropertyChanges, Property, Browser } from '@syncfusion/ej2-base';
import { createElement as buildTag, detach, classList } from '@syncfusion/ej2-base/dom';
import { getUniqueID } from '@syncfusion/ej2-base/util';
import { Browser } from '@syncfusion/ej2-base/browser';
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 CLS_ROOT = 'e-hscroll';
var CLS_RTL = 'e-rtl';
var CLS_HSCROLLBAR = 'e-hscroll-bar';
var CLS_HSCROLLCON = 'e-hscroll-content';
var CLS_NAVARROW = 'e-nav-arrow';
var CLS_NAVRIGHTARROW = 'e-nav-right-arrow';
var CLS_NAVLEFTARROW = 'e-nav-left-arrow';
var CLS_HSCROLLNAV = 'e-hor-nav';
var HScroll = (function (_super) {

@@ -41,18 +38,20 @@ __extends(HScroll, _super);

this.browserCheck = this.browser === 'mozilla';
var element = this.element;
this.ieCheck = this.browser === 'edge' || this.browser === 'msie';
this.initialize();
if (this.element.id === '') {
this.element.id = getUniqueID('hscroll');
if (element.id === '') {
element.id = getUniqueID('hscroll');
this.uniqueId = true;
}
this.element.style.display = 'block';
element.style.display = 'block';
if (this.enableRtl) {
this.element.classList.add(CLASS_RTL);
element.classList.add(CLS_RTL);
}
};
HScroll.prototype.render = function () {
this.createNavigationIcon(this.element, CLASS_NAVRIGHTARROW + ' ' + CLASS_NAVARROW);
this.createNavIcon(this.element, CLS_NAVRIGHTARROW + ' ' + CLS_NAVARROW);
};
HScroll.prototype.initialize = function () {
var scrollEle = createElement('div', { className: CLASS_HSCROLLCON });
var scrollDiv = createElement('div', { className: CLASS_HSCROLLBAR });
var scrollEle = buildTag('div', { className: CLS_HSCROLLCON });
var scrollDiv = buildTag('div', { className: CLS_HSCROLLBAR });
var ele = this.element;

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

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

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

nav.parentElement.removeChild(nav);
EventHandler.remove(this.scrollEle, 'scroll', this.scrollEventHandler);
EventHandler.remove(this.scrollEle, 'scroll', this.scrollHandler);
this.touchModule.destroy();

@@ -99,13 +98,13 @@ this.touchModule = null;

};
HScroll.prototype.createNavigationIcon = function (element, classList) {
HScroll.prototype.createNavIcon = function (element, classList) {
var id = element.id.concat('_nav');
var className = 'e-' + element.id.concat('_nav ' + CLASS_HSCROLLNAV);
var nav = createElement('div', { id: id, className: className });
var navItem = createElement('div', { className: classList + ' e-icons' });
var className = 'e-' + element.id.concat('_nav ' + CLS_HSCROLLNAV);
var nav = buildTag('div', { id: id, className: className });
var navItem = buildTag('div', { className: classList + ' e-icons' });
nav.appendChild(navItem);
nav.setAttribute('tabindex', '0');
element.insertBefore(nav, element.firstChild);
EventHandler.add(this.scrollEle, 'scroll', this.scrollEventHandler, this);
new Touch(nav, { taphold: this.tabHoldHandler.bind(this) });
if (Browser.info.name === 'msie') {
EventHandler.add(this.scrollEle, 'scroll', this.scrollHandler, this);
new Touch(nav, { tapHold: this.tabHoldHandler.bind(this) });
if (this.ieCheck) {
nav.classList.add('e-ie-align');

@@ -119,3 +118,3 @@ }

EventHandler.add(nav, 'click', this.clickEventHandler, this);
this.touchModule = new Touch(element, { scroll: this.touchScrollHandler.bind(this) });
this.touchModule = new Touch(element, { scroll: this.touchHandler.bind(this) });
};

@@ -128,6 +127,6 @@ HScroll.prototype.repeatScroll = function (e) {

var trgt = e.originalEvent.target;
trgt = trgt.classList.contains(CLASS_HSCROLLNAV) ? trgt.firstElementChild : trgt;
trgt = this.contains(trgt, CLS_HSCROLLNAV) ? trgt.firstElementChild : trgt;
var timeoutFun = function () {
var scrollDis = 10;
_this.contentScrolling(scrollDis, trgt);
_this.eleScrolling(scrollDis, trgt);
};

@@ -138,25 +137,30 @@ this.timeout = setInterval(function () {

};
HScroll.prototype.contentScrolling = function (scrollDis, trgt) {
HScroll.prototype.contains = function (ele, className) {
return ele.classList.contains(className);
};
HScroll.prototype.eleScrolling = function (scrollDis, trgt) {
var element = this.scrollEle;
var rootEle = this.element;
var classList = trgt.classList;
if (classList.contains(CLASS_HSCROLLNAV)) {
classList = this.element.querySelector('.' + CLASS_NAVARROW).classList;
if (classList.contains(CLS_HSCROLLNAV)) {
classList = this.element.querySelector('.' + CLS_NAVARROW).classList;
}
if (this.element.classList.contains(CLASS_RTL) && this.browserCheck) {
if (this.contains(rootEle, CLS_RTL) && this.browserCheck) {
scrollDis = -scrollDis;
}
if ((!this.element.classList.contains(CLASS_RTL) || this.browserCheck) || this.browser === 'edge') {
if (classList.contains(CLASS_NAVRIGHTARROW)) {
element.scrollLeft = element.scrollLeft + scrollDis;
var scrlLeft = element.scrollLeft;
if ((!this.contains(rootEle, CLS_RTL) || this.browserCheck) || this.ieCheck) {
if (classList.contains(CLS_NAVRIGHTARROW)) {
element.scrollLeft = scrlLeft + scrollDis;
}
else {
element.scrollLeft = element.scrollLeft - scrollDis;
element.scrollLeft = scrlLeft - scrollDis;
}
}
else {
if (classList.contains(CLASS_NAVLEFTARROW)) {
element.scrollLeft = element.scrollLeft + scrollDis;
if (classList.contains(CLS_NAVLEFTARROW)) {
element.scrollLeft = scrlLeft + scrollDis;
}
else {
element.scrollLeft = element.scrollLeft - scrollDis;
element.scrollLeft = scrlLeft - scrollDis;
}

@@ -166,9 +170,9 @@ }

HScroll.prototype.clickEventHandler = function (e) {
this.contentScrolling(this.scrollStep, e.target);
this.eleScrolling(this.scrollStep, e.target);
};
HScroll.prototype.touchScrollHandler = function (e) {
HScroll.prototype.touchHandler = function (e) {
var ele = this.scrollEle;
var distance;
distance = e.distanceX;
if (this.browser === 'edge') {
if ((this.ieCheck) && this.contains(this.element, CLS_RTL)) {
distance = -distance;

@@ -183,7 +187,8 @@ }

};
HScroll.prototype.scrollEventHandler = function (e) {
HScroll.prototype.scrollHandler = function (e) {
var target = e.target;
var width = target.offsetWidth;
var navElement = this.element.firstChild.firstChild;
if (navElement) {
var rootEle = this.element;
var navEle = this.element.firstChild.firstChild;
if (navEle) {
var scrollLeft = target.scrollLeft;

@@ -194,25 +199,18 @@ if (scrollLeft <= 0) {

if (scrollLeft === 0) {
if ((!this.element.classList.contains(CLASS_RTL) || this.browserCheck) || this.browser === 'edge') {
classList(navElement, [CLASS_NAVRIGHTARROW], [CLASS_NAVLEFTARROW]);
if ((!this.contains(rootEle, CLS_RTL) || this.browserCheck) || this.ieCheck) {
classList(navEle, [CLS_NAVRIGHTARROW], [CLS_NAVLEFTARROW]);
}
else {
classList(navElement, [CLASS_NAVLEFTARROW], [CLASS_NAVRIGHTARROW]);
classList(navEle, [CLS_NAVLEFTARROW], [CLS_NAVRIGHTARROW]);
}
}
else if (Math.ceil(width + scrollLeft) >= target.scrollWidth) {
if ((!this.element.classList.contains(CLASS_RTL) || this.browserCheck) || this.browser === 'edge') {
classList(navElement, [CLASS_NAVLEFTARROW], [CLASS_NAVRIGHTARROW]);
if ((!this.contains(rootEle, CLS_RTL) || this.browserCheck) || this.ieCheck) {
classList(navEle, [CLS_NAVLEFTARROW], [CLS_NAVRIGHTARROW]);
}
else {
classList(navElement, [CLASS_NAVRIGHTARROW], [CLASS_NAVLEFTARROW]);
classList(navEle, [CLS_NAVRIGHTARROW], [CLS_NAVLEFTARROW]);
}
}
else {
return;
}
return;
}
else {
return;
}
};

@@ -226,3 +224,3 @@ HScroll.prototype.onPropertyChanged = function (newProp, oldProp) {

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

@@ -229,0 +227,0 @@ }

1004

dist/es6/toolbar/toolbar.js

@@ -17,36 +17,36 @@ var __extends = (this && this.__extends) || (function () {

};
import { Component, EventHandler, Property, Event, 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 { Component, EventHandler, Property, Event } from '@syncfusion/ej2-base';
import { addClass, removeClass, isVisible, closest, attributes, detach, classList } from '@syncfusion/ej2-base/dom';
import { createElement as buildTag, selectAll, setStyleAttribute as setStyle } from '@syncfusion/ej2-base/dom';
import { isNullOrUndefined as isNOU, getUniqueID, formatUnit } from '@syncfusion/ej2-base/util';
import { NotifyPropertyChanges, CreateBuilder, ChildProperty } from '@syncfusion/ej2-base';
import { KeyboardEvents, Collection } from '@syncfusion/ej2-base';
import { KeyboardEvents, Collection, Browser } from '@syncfusion/ej2-base';
import { Popup } from '@syncfusion/ej2-popups';
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';
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 CLS_ITEMS = 'e-toolbar-items';
var CLS_ITEM = 'e-toolbar-item';
var CLS_RTL = 'e-rtl';
var CLS_SEPARATOR = 'e-separator';
var CLS_POPUPICON = 'e-popup-up-icon';
var CLS_POPUPDOWN = 'e-popup-down-icon';
var CLS_TEMPLATE = 'e-template';
var CLS_DISABLE = 'e-overlay';
var CLS_POPUPTEXT = 'e-toolbar-text';
var CLS_TBARTEXT = 'e-popup-text';
var CLS_TBAROVERFLOW = 'e-overflow-show';
var CLS_POPOVERFLOW = 'e-overflow-hide';
var CLS_TBARBTN = 'e-tbar-btn';
var CLS_TBARNAV = 'e-hor-nav';
var CLS_TBARRIGHT = 'e-toolbar-right';
var CLS_TBARLEFT = 'e-toolbar-left';
var CLS_TBARCENTER = 'e-toolbar-center';
var CLS_TBARPOS = 'e-tbar-pos';
var CLS_TBARSCROLL = 'e-hscroll-content';
var CLS_POPUPNAV = 'e-hor-nav';
var CLS_POPUPCLASS = 'e-toolbar-pop';
var CLS_POPUP = 'e-toolbar-popup';
var CLS_TBARBTNTEXT = 'e-tbar-btn-text';
var CLS_TBARNAVACT = 'e-nav-active';
var Item = (function (_super) {

@@ -126,7 +126,7 @@ __extends(Item, _super);

if (this.enableRtl) {
this.element.classList.add('e-rtl');
this.add(this.element, CLS_RTL);
}
};
Toolbar.prototype.wireEvents = function () {
EventHandler.add(this.element, 'click', this.clickEventHandler, this);
EventHandler.add(this.element, 'click', this.clickHandler, this);
window.onresize = this.resize.bind(this);

@@ -140,6 +140,6 @@ this.keyModule = new KeyboardEvents(this.element, {

Toolbar.prototype.unwireEvents = function () {
EventHandler.remove(this.element, 'click', this.clickEventHandler);
EventHandler.remove(this.element, 'click', this.clickHandler);
this.destroyHScroll();
this.keyModule.destroy();
if (this.popupObj) {
if (this.popObj) {
EventHandler.remove(document, 'scroll', this.docEvent);

@@ -149,6 +149,12 @@ EventHandler.remove(document, 'click', this.docEvent);

};
Toolbar.prototype.docEvent = function (e) {
var popEle = closest(e.target, '.e-popup');
if (this.popObj && isVisible(this.popObj.element) && !popEle) {
this.popObj.hide({ name: 'SlideUp', duration: 100 });
}
};
Toolbar.prototype.destroyHScroll = function () {
if (this.scrollModule) {
if (this.tbarAlign) {
this.scrollModule.element.classList.add(CLASS_TBARPOS);
this.add(this.scrollModule.element, CLS_TBARPOS);
}

@@ -159,2 +165,8 @@ this.scrollModule.destroy();

};
Toolbar.prototype.add = function (ele, val) {
ele.classList.add(val);
};
Toolbar.prototype.remove = function (ele, val) {
ele.classList.remove(val);
};
Toolbar.prototype.keyActionHandler = function (e) {

@@ -165,11 +177,13 @@ e.preventDefault();

var rootEle = this.element;
var popupObj = this.popupObj;
if (trgt.classList.contains(CLASS_TBARNAV) && popupObj && isVisible(popupObj.element)) {
clst = popupObj.element.querySelector('.' + CLASS_ITEM);
var popObj = this.popObj;
var popAnimate = { name: 'SlideUp', duration: 100 };
var tbrNavChk = trgt.classList.contains(CLS_TBARNAV);
if (tbrNavChk && popObj && isVisible(popObj.element)) {
clst = popObj.element.querySelector('.' + CLS_ITEM);
}
else if (rootEle === trgt || trgt.classList.contains(CLASS_TBARNAV)) {
clst = rootEle.querySelector('.' + CLASS_ITEM);
else if (rootEle === trgt || tbrNavChk) {
clst = rootEle.querySelector('.' + CLS_ITEM);
}
else {
clst = closest(trgt, '.' + CLASS_ITEM);
clst = closest(trgt, '.' + CLS_ITEM);
}

@@ -179,3 +193,3 @@ if (clst) {

case 'moveRight':
if (rootEle === trgt || trgt.classList.contains(CLASS_TBARNAV)) {
if (rootEle === trgt || tbrNavChk) {
clst.firstChild.focus();

@@ -188,7 +202,7 @@ }

case 'moveLeft':
if (popupObj && trgt.classList.contains(CLASS_TBARNAV)) {
if (popObj && tbrNavChk) {
if (this.tbarAlign) {
clst = closest(clst, '.' + CLASS_ITEMS);
var innerItems = selectAll('.' + CLASS_ITEM, clst);
clst = innerItems[innerItems.length - 1];
clst = closest(clst, '.' + CLS_ITEMS);
var items = selectAll('.' + CLS_ITEM, clst);
clst = items[items.length - 1];
}

@@ -199,3 +213,3 @@ else {

}
if (trgt.classList.contains(CLASS_TBARNAV) && !clst.classList.contains(CLASS_SEPARATOR)) {
if (tbrNavChk && !clst.classList.contains(CLS_SEPARATOR) && !clst.classList.contains(CLS_DISABLE)) {
clst.firstChild.focus();

@@ -208,16 +222,13 @@ }

case 'moveUp':
if (popupObj && closest(trgt, '.e-popup')) {
if (popupObj.element.firstElementChild === clst) {
rootEle.querySelector('.' + CLASS_TBARNAV).focus();
case 'moveDown':
var value = e.action === 'moveUp' ? 'previous' : 'next';
if (popObj && closest(trgt, '.e-popup')) {
if (e.action === 'moveUp' && popObj.element.firstElementChild === clst) {
rootEle.querySelector('.' + CLS_TBARNAV).focus();
}
else {
this.eleFocus(clst, 'previous');
this.eleFocus(clst, value);
}
}
break;
case 'moveDown':
if (popupObj && closest(trgt, '.e-popup')) {
this.eleFocus(clst, 'next');
}
else if (popupObj && isVisible(popupObj.element)) {
else if (e.action === 'moveDown') {
clst.firstChild.focus();

@@ -228,3 +239,3 @@ }

var ele = clst.firstChild;
if (rootEle === trgt || trgt.classList.contains(CLASS_TBARNAV)) {
if (rootEle === trgt || tbrNavChk) {
if (this.activeEle) {

@@ -240,16 +251,16 @@ this.activeEle.focus();

case 'popupClose':
if (popupObj) {
popupObj.hide({ name: 'SlideUp', duration: 100 });
if (popObj) {
popObj.hide(popAnimate);
}
break;
case 'popupOpen':
if (!trgt.classList.contains(CLASS_TBARNAV)) {
if (!tbrNavChk) {
return;
}
if (popupObj && !isVisible(popupObj.element)) {
popupObj.element.style.top = rootEle.offsetHeight + 'px';
popupObj.show({ name: 'SlideDown', duration: 100 });
if (popObj && !isVisible(popObj.element)) {
popObj.element.style.top = rootEle.offsetHeight + 'px';
popObj.show({ name: 'SlideDown', duration: 100 });
}
else {
popupObj.hide({ name: 'SlideUp', duration: 100 });
popObj.hide(popAnimate);
}

@@ -262,12 +273,19 @@ break;

var sib = Object(closest)[pos + 'ElementSibling'];
var contains = function (el) {
return el.classList.contains(CLS_SEPARATOR) || el.classList.contains(CLS_DISABLE);
};
if (sib) {
if (sib.classList.contains(CLASS_SEPARATOR)) {
var skipEle = contains(sib);
if (skipEle) {
if (Object(sib)[pos + 'Sibling']) {
sib = Object(sib)[pos + 'Sibling'];
if (sib.classList.contains(CLASS_SEPARATOR)) {
skipEle = contains(sib);
if (skipEle) {
this.eleFocus(sib, pos);
return;
}
}
else if (this.popupObj && pos === 'next') {
this.element.querySelector('.' + CLASS_TBARNAV).focus();
else if (this.popObj && pos === 'next') {
this.element.querySelector('.' + CLS_TBARNAV).focus();
return;
}

@@ -283,57 +301,75 @@ }

if (pos === 'next') {
elem.querySelector('.' + CLASS_ITEM).firstChild.focus();
var el = elem.querySelector('.' + CLS_ITEM);
if (contains(el)) {
this.eleFocus(el, pos);
}
else {
el.firstChild.focus();
}
}
else {
elem.lastElementChild.firstChild.focus();
var el = elem.lastElementChild;
if (contains(el)) {
this.eleFocus(el, pos);
}
else {
el.firstChild.focus();
}
}
}
else if (this.popupObj) {
this.element.querySelector('.' + CLASS_TBARNAV).focus();
else if (this.popObj) {
this.element.querySelector('.' + CLS_TBARNAV).focus();
}
}
else if (this.popupObj && pos === 'next') {
this.element.querySelector('.' + CLASS_TBARNAV).focus();
else if (this.popObj && pos === 'next') {
this.element.querySelector('.' + CLS_TBARNAV).focus();
}
};
Toolbar.prototype.clickEventHandler = function (e) {
Toolbar.prototype.clickHandler = function (e) {
var trgt = e.target;
var clsList = trgt.classList;
var ele = this.element;
var popObj = this.popupObj;
var popupNav = closest(trgt, ('.' + CLASS_TBARNAV));
var popupNav = closest(trgt, ('.' + CLS_TBARNAV));
if (!popupNav) {
popupNav = trgt;
}
if (!ele.children[0].classList.contains('e-hscroll') && (clsList.contains(CLASS_TBARNAV))) {
if (!ele.children[0].classList.contains('e-hscroll') && (clsList.contains(CLS_TBARNAV))) {
clsList = trgt.querySelector('.e-icons').classList;
}
if (clsList.contains(CLASS_POPUPICON) || clsList.contains(CLASS_POPUPDOWN)) {
if (isVisible(popObj.element)) {
popupNav.classList.remove(CLASS_TBARNAVACT);
popObj.hide({ name: 'SlideUp', duration: 100 });
}
else {
if (ele.classList.contains(CLASS_RTL)) {
popObj.enableRtl = true;
popObj.position = { X: 'left', Y: 'top' };
}
if (popObj.offsetX === 0 && !ele.classList.contains(CLASS_RTL)) {
popObj.enableRtl = false;
popObj.position = { X: 'right', Y: 'top' };
}
popObj.dataBind();
popObj.element.style.top = this.element.offsetHeight + 'px';
popupNav.classList.add(CLASS_TBARNAVACT);
popObj.show({ name: 'SlideDown', duration: 100 });
}
if (clsList.contains(CLS_POPUPICON) || clsList.contains(CLS_POPUPDOWN)) {
this.popupClickHandler(ele, popupNav, CLS_RTL);
}
var itemObj;
var clst = closest(e.target, '.' + CLASS_ITEM);
var clst = closest(e.target, '.' + CLS_ITEM);
if ((isNOU(clst) || clst.classList.contains(CLS_DISABLE)) && !popupNav.classList.contains(CLS_TBARNAV)) {
return;
}
if (clst) {
itemObj = this.items[this.sliceFn.call(clst.parentElement.children).indexOf(clst)];
itemObj = this.items[this.tbarEle.indexOf(clst)];
}
var eventArgs = { eventName: 'clicked', originalEvent: e, item: itemObj };
var eventArgs = { originalEvent: e, item: itemObj };
this.trigger('clicked', eventArgs);
};
;
Toolbar.prototype.popupClickHandler = function (ele, popupNav, CLS_RTL) {
var popObj = this.popObj;
if (isVisible(popObj.element)) {
popupNav.classList.remove(CLS_TBARNAVACT);
popObj.hide({ name: 'SlideUp', duration: 100 });
}
else {
if (ele.classList.contains(CLS_RTL)) {
popObj.enableRtl = true;
popObj.position = { X: 'left', Y: 'top' };
}
if (popObj.offsetX === 0 && !ele.classList.contains(CLS_RTL)) {
popObj.enableRtl = false;
popObj.position = { X: 'right', Y: 'top' };
}
popObj.dataBind();
popObj.element.style.top = this.element.offsetHeight + 'px';
popupNav.classList.add(CLS_TBARNAVACT);
popObj.show({ name: 'SlideDown', duration: 100 });
}
};
Toolbar.prototype.render = function () {

@@ -347,3 +383,6 @@ this.initialize();

var height = formatUnit(this.height);
setStyleAttribute(this.element, { 'width': width, 'height': height });
if (Browser.info.name !== 'msie' || this.height !== 'auto') {
setStyle(this.element, { 'height': height });
}
setStyle(this.element, { 'width': width });
var ariaAttr = {

@@ -356,4 +395,3 @@ 'role': 'toolbar', 'aria-disabled': 'false', 'aria-haspopup': 'false', 'aria-orientation': 'horizontal',

this.trgtEle = (this.element.children.length > 0) ? this.element.querySelector('div') : null;
this.tbarAlgEle = { left: [], center: [], right: [] };
this.sliceFn = [].slice;
this.tbarAlgEle = { lefts: [], centers: [], rights: [] };
this.renderItems();

@@ -368,12 +406,12 @@ this.renderOverflowMode();

if (this.tbarAlign) {
this.element.querySelector('.' + CLASS_ITEMS + ' .' + CLASS_TBARCENTER).removeAttribute('style');
this.element.querySelector('.' + CLS_ITEMS + ' .' + CLS_TBARCENTER).removeAttribute('style');
}
this.scrollModule = new HScroll({ scrollStep: 50, enableRtl: this.enableRtl }, innerItems[0]);
this.scrollModule.element.classList.remove(CLASS_TBARPOS);
setStyleAttribute(this.element, { overflow: 'hidden' });
this.remove(this.scrollModule.element, CLS_TBARPOS);
setStyle(this.element, { overflow: 'hidden' });
}
};
Toolbar.prototype.itemWidthCal = function (innerItem) {
Toolbar.prototype.itemWidthCal = function (items) {
var width = 0;
this.sliceFn.call(innerItem.children).forEach(function (el) {
[].slice.call(items.children).forEach(function (el) {
width += el.offsetWidth;

@@ -390,3 +428,3 @@ });

if (this.tbarAlign) {
itemWidth = this.itemWidthCal(innerItem);
itemWidth = this.itemWidthCal(this.scrollModule ? innerItem.querySelector('.e-hscroll-content') : innerItem);
}

@@ -396,3 +434,3 @@ else {

}
var popNav = element.querySelector('.' + CLASS_TBARNAV);
var popNav = element.querySelector('.' + CLS_TBARNAV);
if (itemWidth > eleWidth - (popNav ? popNav.offsetWidth : 0)) {

@@ -407,3 +445,3 @@ return true;

var ele = this.element;
var innerItems = ele.querySelector('.' + CLASS_ITEMS);
var innerItems = ele.querySelector('.' + CLS_ITEMS);
if (ele && ele.children.length > 0) {

@@ -414,6 +452,6 @@ this.offsetWid = ele.offsetWidth;

this.destroyHScroll();
this.initHScroll(ele, ele.getElementsByClassName(CLASS_ITEMS));
this.initHScroll(ele, ele.getElementsByClassName(CLS_ITEMS));
break;
case 'Popup':
this.element.classList.add('e-toolpop');
this.add(this.element, 'e-toolpop');
if (this.tbarAlign) {

@@ -423,7 +461,7 @@ this.removePositioning();

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');
this.createPopupEle(ele, [].slice.call(selectAll('.' + CLS_ITEMS + ' .' + CLS_ITEM, ele)));
this.element.querySelector('.' + CLS_TBARNAV).setAttribute('tabIndex', '0');
}
if (this.tbarAlign) {
innerItems.classList.add(CLASS_TBARPOS);
this.add(innerItems, CLS_TBARPOS);
this.itemPositioning();

@@ -435,57 +473,10 @@ }

};
Toolbar.prototype.checkPriority = function (ele, inEle, eleWidth, pre) {
var len = inEle.length;
var eleWid = eleWidth;
var sepCheck = 0;
var itemCount = 0;
var itemPopCount = 0;
for (var i = len - 1; i >= 0; i--) {
var mrgn = parseFloat((window.getComputedStyle(inEle[i])).marginRight);
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(CLASS_SEPARATOR)) {
setStyleAttribute(sepEle, { display: 'none' });
}
}
sepCheck++;
itemCount = 0;
itemPopCount = 0;
}
else {
itemCount++;
}
if (inEle[i].classList.contains(CLASS_TBAROVERFLOW) && pre) {
eleWidth -= (inEle[i].offsetWidth + (mrgn));
}
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 + (mrgn));
}
}
}
if (pre) {
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('.' + CLASS_TBARNAV);
Toolbar.prototype.createPopupEle = function (ele, innerEle) {
var innerNav = ele.querySelector('.' + CLS_TBARNAV);
if (!innerNav) {
this.createPopupIcon(ele);
}
innerNav = ele.querySelector('.' + CLASS_TBARNAV);
innerNav = ele.querySelector('.' + CLS_TBARNAV);
var eleWidth = (ele.offsetWidth - (innerNav.offsetWidth));
if (this.enableRtl) {
this.element.classList.remove('e-rtl');
}
this.element.classList.remove('e-rtl');
this.checkPriority(ele, innerEle, eleWidth, true);

@@ -497,38 +488,12 @@ if (this.enableRtl) {

};
Toolbar.prototype.createPopupIcon = function (element) {
var id = element.id.concat('_nav');
var className = 'e-' + element.id.concat('_nav ' + CLASS_POPUPNAV);
var nav = buildTag('div', { id: id, className: className });
if (Browser.info.name === 'msie') {
nav.classList.add('e-ie-align');
}
var navItem = buildTag('div', { className: CLASS_POPUPDOWN + ' e-icons' });
nav.appendChild(navItem);
nav.setAttribute('tabindex', '0');
element.insertBefore(nav, element.firstChild);
};
Toolbar.prototype.createPopup = function () {
var _this = this;
var element = this.element;
var eleHeight;
var eleItem;
eleItem = element.querySelector('.' + CLASS_ITEM + ':not(.' + CLASS_SEPARATOR + ' ):not(.' + CLASS_POPUP + ' )');
eleHeight = element.style.height === 'auto' ? null : eleItem.offsetHeight;
var ele;
var nodes;
var popupPri = [];
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: CLASS_POPUPCLASS });
}
var poppedEle = this.sliceFn.call(selectAll('.' + CLASS_POPUP, element.querySelector('.' + CLASS_ITEMS)));
nodes = selectAll('.' + CLASS_TBAROVERFLOW, ele);
Toolbar.prototype.pushingPoppedEle = function (tbarObj, popupPri, ele, eleHeight) {
var element = tbarObj.element;
var nodes = selectAll('.' + CLS_TBAROVERFLOW, ele);
var nodeIndex = 0;
var poppedEle = [].slice.call(selectAll('.' + CLS_POPUP, element.querySelector('.' + CLS_ITEMS)));
var nodePri = 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) {
nodes = selectAll('.' + CLS_TBAROVERFLOW, ele);
if (el.classList.contains(CLS_TBAROVERFLOW) && nodes.length > 0) {
if (tbarObj.tbResize && nodes.length > index) {
ele.insertBefore(el, nodes[index]);

@@ -542,14 +507,14 @@ ++nodePri;

}
else if (el.classList.contains(CLASS_TBAROVERFLOW)) {
else if (el.classList.contains(CLS_TBAROVERFLOW)) {
ele.insertBefore(el, ele.firstChild);
++nodePri;
}
else if (_this.tbResize && el.classList.contains(CLASS_POPOVERFLOW) && ele.children.length > 0 && nodes.length === 0) {
else if (tbarObj.tbResize && el.classList.contains(CLS_POPOVERFLOW) && ele.children.length > 0 && nodes.length === 0) {
ele.insertBefore(el, ele.firstChild);
++nodePri;
}
else if (el.classList.contains(CLASS_POPOVERFLOW)) {
else if (el.classList.contains(CLS_POPOVERFLOW)) {
popupPri.push(el);
}
else if (_this.tbResize) {
else if (tbarObj.tbResize) {
ele.insertBefore(el, ele.childNodes[nodeIndex + nodePri]);

@@ -561,3 +526,3 @@ ++nodeIndex;

}
setStyleAttribute(el, { display: '', height: eleHeight + 'px' });
setStyle(el, { display: '', height: eleHeight + 'px' });
});

@@ -567,7 +532,7 @@ popupPri.forEach(function (el) {

});
var tbarEle = selectAll('.' + CLASS_ITEM, element.querySelector('.' + CLASS_ITEMS));
var tbarEle = selectAll('.' + CLS_ITEM, element.querySelector('.' + CLS_ITEMS));
for (var i = tbarEle.length - 1; i >= 0; i--) {
var tbarElement = tbarEle[i];
if (tbarElement.classList.contains(CLASS_SEPARATOR)) {
setStyleAttribute(tbarElement, { display: 'none' });
if (tbarElement.classList.contains(CLS_SEPARATOR)) {
setStyle(tbarElement, { display: 'none' });
}

@@ -578,10 +543,26 @@ else {

}
this.initPopup(element, ele);
};
Toolbar.prototype.initPopup = function (element, ele) {
if (!this.popupObj) {
Toolbar.prototype.createPopup = function () {
var element = this.element;
var eleHeight;
var eleItem;
eleItem = element.querySelector('.' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + ' ):not(.' + CLS_POPUP + ' )');
eleHeight = (element.style.height === 'auto' || element.style.height === '') ? null : eleItem.offsetHeight;
var ele;
var popupPri = [];
if (element.querySelector('#' + element.id + '_popup.' + CLS_POPUPCLASS)) {
ele = element.querySelector('#' + element.id + '_popup.' + CLS_POPUPCLASS);
}
else {
ele = buildTag('div', { id: element.id + '_popup', className: CLS_POPUPCLASS });
}
this.pushingPoppedEle(this, popupPri, ele, eleHeight);
this.popupInit(element, ele);
};
Toolbar.prototype.popupInit = function (element, ele) {
if (!this.popObj) {
element.appendChild(ele);
setStyleAttribute(this.element, { overflow: '' });
var popup = new Popup(ele, {
relateTo: element,
setStyle(this.element, { overflow: '' });
var popup = new Popup(null, {
relateTo: this.element,
offsetY: (element.offsetHeight),

@@ -593,2 +574,3 @@ enableRtl: this.enableRtl,

});
popup.appendTo(ele);
EventHandler.add(document, 'scroll', this.docEvent.bind(this));

@@ -598,25 +580,17 @@ EventHandler.add(document, 'click ', this.docEvent.bind(this));

popup.hide();
this.popupObj = popup;
this.popObj = popup;
this.element.setAttribute('aria-haspopup', 'true');
}
else {
var popupEle = this.popupObj.element;
setStyleAttribute(popupEle, { maxHeight: '', display: 'block' });
setStyleAttribute(popupEle, { maxHeight: popupEle.offsetHeight + 'px', display: '' });
var popupEle = this.popObj.element;
setStyle(popupEle, { maxHeight: '', display: 'block' });
setStyle(popupEle, { maxHeight: popupEle.offsetHeight + 'px', display: '' });
}
};
Toolbar.prototype.docEvent = function (e) {
var popEle = closest(e.target, '.e-popup');
if (this.popupObj && isVisible(this.popupObj.element) && !popEle) {
this.popupObj.hide({ name: 'SlideUp', duration: 100 });
}
};
Toolbar.prototype.popupOpen = function (e) {
var popObj = this.popupObj;
var popupEle = this.popupObj.element;
var toolEle = this.element;
var popupNav = toolEle.querySelector('.' + CLASS_TBARNAV);
setStyleAttribute(popObj.element, { height: 'auto', maxHeight: '' });
popObj.element.style.height = 'auto';
popObj.element.style.maxHeight = '';
var popObj = this.popObj;
var popupEle = this.popObj.element;
var toolEle = this.popObj.element.parentElement;
var popupNav = toolEle.querySelector('.' + CLS_TBARNAV);
setStyle(popObj.element, { height: 'auto', maxHeight: '' });
popObj.element.style.maxHeight = popObj.element.clientHeight + 'px';

@@ -626,4 +600,4 @@ var popupElePos = popupEle.offsetTop + popupEle.offsetHeight + calculatePosition(toolEle).top;

var popIcon = popupNav.firstElementChild;
popupNav.classList.add(CLASS_TBARNAVACT);
classList(popIcon, [CLASS_POPUPICON], [CLASS_POPUPDOWN]);
popupNav.classList.add(CLS_TBARNAVACT);
classList(popIcon, [CLS_POPUPICON], [CLS_POPUPDOWN]);
}

@@ -633,3 +607,3 @@ if ((window.innerHeight + window.scrollY) < popupElePos) {

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

@@ -639,130 +613,118 @@ };

var element = this.element.parentElement;
var popupNav = element.querySelector('.' + CLASS_TBARNAV);
var popupNav = element.querySelector('.' + CLS_TBARNAV);
if (popupNav) {
var popIcon = popupNav.firstElementChild;
popupNav.classList.remove(CLASS_TBARNAVACT);
classList(popIcon, [CLASS_POPUPDOWN], [CLASS_POPUPICON]);
popupNav.classList.remove(CLS_TBARNAVACT);
classList(popIcon, [CLS_POPUPDOWN], [CLS_POPUPICON]);
}
};
Toolbar.prototype.removePositioning = function () {
var item = this.element.querySelector('.' + CLASS_ITEMS);
if (isNOU(item) || !item.classList.contains(CLASS_TBARPOS)) {
return;
Toolbar.prototype.checkPriority = function (ele, inEle, eleWidth, pre) {
var len = inEle.length;
var eleWid = eleWidth;
var sepCheck = 0;
var itemCount = 0;
var itemPopCount = 0;
for (var i = len - 1; i >= 0; i--) {
var mrgn = parseFloat((window.getComputedStyle(inEle[i])).marginRight);
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(CLS_SEPARATOR)) {
if (sepCheck > 0 && itemCount === itemPopCount) {
var sepEle = inEle[i + itemCount + (sepCheck - 1)];
if (sepEle.classList.contains(CLS_SEPARATOR)) {
setStyle(sepEle, { display: 'none' });
}
}
sepCheck++;
itemCount = 0;
itemPopCount = 0;
}
else {
itemCount++;
}
if (inEle[i].classList.contains(CLS_TBAROVERFLOW) && pre) {
eleWidth -= (inEle[i].offsetWidth + (mrgn));
}
else if (!inEle[i].classList.contains(CLS_SEPARATOR)) {
inEle[i].classList.add(CLS_POPUP);
setStyle(inEle[i], { display: 'none' });
itemPopCount++;
}
else {
eleWidth -= (inEle[i].offsetWidth + (mrgn));
}
}
}
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;
if (pre) {
var popedEle = selectAll('.' + CLS_ITEM + ':not(.' + CLS_POPUP + ')', this.element);
this.checkPriority(ele, popedEle, eleWid, false);
}
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);
Toolbar.prototype.createPopupIcon = function (element) {
var id = element.id.concat('_nav');
var className = 'e-' + element.id.concat('_nav ' + CLS_POPUPNAV);
var nav = buildTag('div', { id: id, className: className });
if (Browser.info.name === 'msie' || Browser.info.name === 'edge') {
nav.classList.add('e-ie-align');
}
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);
}
var navItem = buildTag('div', { className: CLS_POPUPDOWN + ' e-icons' });
nav.appendChild(navItem);
nav.setAttribute('tabindex', '0');
element.insertBefore(nav, element.firstChild);
};
Toolbar.prototype.renderItems = function () {
var _this = this;
var ele = this.element;
var itemEleDom;
var innerItem;
var innerPos;
var items = this.items;
if (ele && ele.children.length > 0) {
var navEle = selectAll('.' + CLASS_TBARNAV, ele);
itemEleDom = navEle.length > 0 ? ele.children[1] : ele.children[0];
}
if (this.trgtEle != null) {
this.trgtEle.classList.add(CLASS_ITEMS);
this.tbarEle = [];
var innerEle = this.sliceFn.call(this.trgtEle.children);
innerEle.forEach(function (ele) {
if (ele.tagName === 'DIV') {
_this.tbarEle.push(ele);
ele.classList.add(CLASS_ITEM);
Toolbar.prototype.tbarPriRef = function (inEle, indx, sepPri, el, des, elWid, wid) {
var popEle = this.popObj.element;
var query = '.' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + '):not(.' + CLS_TBAROVERFLOW + ')';
var priEleCnt = selectAll('.' + CLS_POPUP + ':not(.' + CLS_TBAROVERFLOW + ')', popEle).length;
if (selectAll(query, inEle).length === 0) {
var eleSep = inEle.children[indx - (indx - sepPri) - 1];
if (!isNOU(eleSep) && eleSep.classList.contains(CLS_SEPARATOR) && !isVisible(eleSep)) {
var sepDisplay = 'none';
eleSep.style.display = 'inherit';
var eleSepWidth = eleSep.offsetWidth + (parseFloat(window.getComputedStyle(eleSep).marginRight) * 2);
var prevSep = eleSep.previousElementSibling;
if ((elWid + eleSepWidth) < wid || des) {
inEle.insertBefore(el, inEle.children[indx - (indx - sepPri)]);
if (!isNOU(prevSep)) {
prevSep.style.display = '';
}
}
});
}
else if (ele && items.length > 0) {
if (!itemEleDom) {
itemEleDom = buildTag('div', { className: CLASS_ITEMS });
}
for (var i = 0; i < items.length; i++) {
innerItem = this.renderSubComponent(items[i]);
this.tbarEle.push(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);
if (prevSep.classList.contains(CLS_SEPARATOR)) {
prevSep.style.display = sepDisplay;
}
}
eleSep.style.display = '';
}
ele.appendChild(itemEleDom);
else {
inEle.insertBefore(el, inEle.children[indx - (indx - sepPri)]);
}
}
else {
inEle.insertBefore(el, inEle.children[indx - priEleCnt]);
}
};
Toolbar.prototype.setAttr = function (attr, element) {
var key = Object.keys(attr)[0];
switch (key) {
case 'class':
element.classList.add(attr[key]);
break;
case 'style':
var value = JSON.parse('\{"' + attr[key].replace(':', '\":\"') + '\"}');
setStyleAttribute(element, value);
break;
default:
element.setAttribute(key, attr[key]);
break;
Toolbar.prototype.popupRefresh = function (popupEle, destroy) {
var ele = this.element;
var popNav = ele.querySelector('.' + CLS_TBARNAV);
var innerEle = ele.querySelector('.' + CLS_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) {
detach(popNav);
this.popObj.destroy();
detach(this.popObj.element);
this.popObj = null;
ele.setAttribute('aria-haspopup', 'false');
ele.classList.remove('e-toolpop');
}
};

@@ -773,13 +735,13 @@ Toolbar.prototype.popupEleRefresh = function (width, popupEle, destroy) {

var index;
var innerEle = this.element.querySelector('.' + CLASS_ITEMS);
var innerEle = this.element.querySelector('.' + CLS_ITEMS);
var _loop_1 = function (el) {
el.style.position = 'absolute';
var elWidth = el.offsetWidth;
var btnText = el.querySelector('.' + CLASS_TBARBTNTEXT);
if (el.classList.contains('e-tbtn-align') || el.classList.contains(CLASS_TBARTEXT)) {
var btnText = el.querySelector('.' + CLS_TBARBTNTEXT);
if (el.classList.contains('e-tbtn-align') || el.classList.contains(CLS_TBARTEXT)) {
var btn = el.children[0];
if (!isNOU(btnText) && el.classList.contains(CLASS_TBARTEXT)) {
if (!isNOU(btnText) && el.classList.contains(CLS_TBARTEXT)) {
btnText.style.display = 'none';
}
else if (!isNOU(btnText) && el.classList.contains(CLASS_POPUPTEXT)) {
else if (!isNOU(btnText) && el.classList.contains(CLS_POPUPTEXT)) {
btnText.style.display = 'block';

@@ -799,4 +761,4 @@ }

if (elWidth < width || destroy) {
if (!el.classList.contains(CLASS_POPOVERFLOW)) {
el.classList.remove(CLASS_POPUP);
if (!el.classList.contains(CLS_POPOVERFLOW)) {
el.classList.remove(CLS_POPUP);
}

@@ -806,10 +768,10 @@ index = this_1.tbarEle.indexOf(el);

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);
index = this_1.tbarAlgEle[(pos + 's')].indexOf(el);
eleSplice = this_1.tbarAlgEle[(pos + 's')];
innerEle = this_1.element.querySelector('.' + CLS_ITEMS + ' .' + 'e-toolbar-' + pos);
}
var sepBeforePri_1 = 0;
eleSplice.slice(0, index).forEach(function (el) {
if (el.classList.contains(CLASS_TBAROVERFLOW) || el.classList.contains(CLASS_SEPARATOR)) {
if (el.classList.contains(CLASS_SEPARATOR)) {
if (el.classList.contains(CLS_TBAROVERFLOW) || el.classList.contains(CLS_SEPARATOR)) {
if (el.classList.contains(CLS_SEPARATOR)) {
el.style.display = '';

@@ -821,33 +783,4 @@ width -= el.offsetWidth;

});
if (el.classList.contains(CLASS_TBAROVERFLOW)) {
var popEle = this_1.popupObj.element;
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(CLASS_SEPARATOR) && !isVisible(eleSep)) {
var sepDisplay = 'none';
eleSep.style.display = 'inherit';
var eleSepWidth = eleSep.offsetWidth + (parseFloat(window.getComputedStyle(eleSep).marginRight) * 2);
var prevSep = eleSep.previousElementSibling;
if ((elWidth + eleSepWidth) < width || destroy) {
innerEle.insertBefore(el, innerEle.children[index - (index - sepBeforePri_1)]);
if (!isNOU(prevSep)) {
prevSep.style.display = '';
}
}
else {
if (prevSep.classList.contains(CLASS_SEPARATOR)) {
prevSep.style.display = sepDisplay;
}
}
eleSep.style.display = '';
}
else {
innerEle.insertBefore(el, innerEle.children[index - (index - sepBeforePri_1)]);
}
}
else {
innerEle.insertBefore(el, innerEle.children[index - priEleCnt]);
}
if (el.classList.contains(CLS_TBAROVERFLOW)) {
this_1.tbarPriRef(innerEle, index, sepBeforePri_1, el, destroy, elWidth, width);
width -= el.offsetWidth;

@@ -860,3 +793,3 @@ }

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

@@ -872,3 +805,3 @@ width -= el.offsetWidth;

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

@@ -880,23 +813,126 @@ var state_1 = _loop_1(el);

};
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)) {
Toolbar.prototype.removePositioning = function () {
var item = this.element.querySelector('.' + CLS_ITEMS);
if (isNOU(item) || !item.classList.contains(CLS_TBARPOS)) {
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) {
detach(popNav);
this.popupObj.destroy();
detach(this.popupObj.element);
this.popupObj = null;
this.element.setAttribute('aria-haspopup', 'false');
this.element.classList.remove('e-toolpop');
this.remove(item, CLS_TBARPOS);
var innerItem = [].slice.call(item.childNodes);
innerItem[1].removeAttribute('style');
innerItem[2].removeAttribute('style');
};
Toolbar.prototype.refreshPositioning = function () {
var item = this.element.querySelector('.' + CLS_ITEMS);
this.add(item, CLS_TBARPOS);
this.itemPositioning();
};
Toolbar.prototype.itemPositioning = function () {
var item = this.element.querySelector('.' + CLS_ITEMS);
if (isNOU(item) || !item.classList.contains(CLS_TBARPOS)) {
return;
}
var popupNav = this.element.querySelector('.' + CLS_TBARNAV);
var innerItem;
if (this.scrollModule) {
innerItem = [].slice.call(item.querySelector('.' + CLS_TBARSCROLL).children);
}
else {
innerItem = [].slice.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;
var alignDiv = [];
alignDiv.push(buildTag('div', { className: CLS_TBARLEFT }));
alignDiv.push(buildTag('div', { className: CLS_TBARCENTER }));
alignDiv.push(buildTag('div', { className: CLS_TBARRIGHT }));
if (pos === 0 && item.align !== 'left') {
alignDiv.forEach(function (ele) {
itemEle.appendChild(ele);
});
this.tbarAlign = true;
this.add(itemEle, CLS_TBARPOS);
}
else if (item.align !== 'left') {
var alignEle = itemEle.childNodes;
var leftAlign_1 = alignDiv[0];
[].slice.call(alignEle).forEach(function (el) {
_this.tbarAlgEle.lefts.push(el);
leftAlign_1.appendChild(el);
});
itemEle.appendChild(leftAlign_1);
itemEle.appendChild(alignDiv[1]);
itemEle.appendChild(alignDiv[2]);
this.tbarAlign = true;
this.add(itemEle, CLS_TBARPOS);
}
};
Toolbar.prototype.ctrlTemplate = function () {
var _this = this;
this.add(this.trgtEle, CLS_ITEMS);
this.tbarEle = [];
var innerEle = [].slice.call(this.trgtEle.children);
innerEle.forEach(function (ele) {
if (ele.tagName === 'DIV') {
_this.tbarEle.push(ele);
_this.add(ele, CLS_ITEM);
}
});
};
Toolbar.prototype.renderItems = function () {
var ele = this.element;
var itemEleDom;
var innerItem;
var innerPos;
var items = this.items;
if (ele && ele.children.length > 0) {
var navEle = selectAll('.' + CLS_TBARNAV, ele);
itemEleDom = navEle.length > 0 ? ele.children[1] : ele.children[0];
}
if (this.trgtEle != null) {
this.ctrlTemplate();
}
else if (ele && items.length > 0) {
if (!itemEleDom) {
itemEleDom = buildTag('div', { className: CLS_ITEMS });
}
for (var i = 0; i < items.length; i++) {
innerItem = this.renderSubComponent(items[i]);
if (this.tbarEle.indexOf(innerItem) === -1) {
this.tbarEle.push(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 + 's')].push(innerItem);
innerPos.appendChild(innerItem);
}
else {
itemEleDom.appendChild(innerItem);
}
}
ele.appendChild(itemEleDom);
}
};
Toolbar.prototype.setAttr = function (attr, element) {
var key = Object.keys(attr);
var keyVal;
for (var i = 0; i < key.length; i++) {
keyVal = key[i];
keyVal === 'class' ? this.add(element, attr[keyVal]) : element.setAttribute(keyVal, attr[keyVal]);
}
};
Toolbar.prototype.enableItems = function (items, isEnable) {

@@ -909,3 +945,3 @@ var elements = items;

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

@@ -915,3 +951,3 @@ else {

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

@@ -921,3 +957,3 @@ };

var innerItems;
var itemsDiv = this.element.querySelector('.' + CLASS_ITEMS);
var itemsDiv = this.element.querySelector('.' + CLS_ITEMS);
var innerEle;

@@ -935,3 +971,3 @@ var itemAgn = 'left';

var item = items_1[_i];
innerItems = selectAll('.' + CLASS_ITEM, this.element);
innerItems = selectAll('.' + CLS_ITEM, this.element);
item.align = itemAgn;

@@ -944,9 +980,9 @@ innerEle = this.renderSubComponent(item);

if (this.scrollModule) {
ele = closest(innerItems[0], '.' + CLASS_ITEMS + ' .' + CLASS_TBARSCROLL).children[algIndex];
ele = closest(innerItems[0], '.' + CLS_ITEMS + ' .' + CLS_TBARSCROLL).children[algIndex];
}
else {
ele = closest(innerItems[0], '.' + CLASS_ITEMS).children[algIndex];
ele = closest(innerItems[0], '.' + CLS_ITEMS).children[algIndex];
}
ele.insertBefore(innerEle, ele.children[index]);
this.tbarAlgEle[item.align].splice(index, 0, innerEle);
this.tbarAlgEle[(item.align + 's')].splice(index, 0, innerEle);
this.refreshPositioning();

@@ -969,3 +1005,3 @@ }

var index;
var innerItems = this.sliceFn.call(selectAll('.' + CLASS_ITEM, this.element));
var innerItems = [].slice.call(selectAll('.' + CLS_ITEM, this.element));
if (typeof (elements) === 'number') {

@@ -977,7 +1013,7 @@ index = parseInt(args.toString(), 10);

if (elements && elements.length > 1) {
for (var _i = 0, _a = this.sliceFn.call(elements); _i < _a.length; _i++) {
for (var _i = 0, _a = [].slice.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);
innerItems = selectAll('.' + CLS_ITEM, this.element);
}

@@ -997,4 +1033,4 @@ }

if (this.tbarAlign) {
var indexAgn = this.tbarAlgEle[this.items[eleIdx].align].indexOf(this.tbarEle[eleIdx]);
this.tbarAlgEle[this.items[eleIdx].align].splice(indexAgn, 1);
var indexAgn = this.tbarAlgEle[(this.items[eleIdx].align + 's')].indexOf(this.tbarEle[eleIdx]);
this.tbarAlgEle[(this.items[eleIdx].align + 's')].splice(indexAgn, 1);
}

@@ -1017,3 +1053,3 @@ detach(innerItems[index]);

}
else if (itemType === 'Input' || itemType === '2') {
else if (itemType === 'Input') {
var templateProperty = templateProp;

@@ -1025,9 +1061,40 @@ var ele = buildTag('input');

}
innerEle.classList.add(CLASS_TEMPLATE);
this.add(innerEle, CLS_TEMPLATE);
this.tbarEle.push(innerEle);
};
Toolbar.prototype.buttonRendering = function (item, innerEle) {
var dom = buildTag('button', { className: CLS_TBARBTN });
var textStr = item.text;
var iconCss;
var iconPos;
item.id ? (dom.id = item.id) : dom.id = getUniqueID('e-tbr-btn');
var btnTxt = buildTag('div', { className: 'e-tbar-btn-text' });
if (textStr) {
btnTxt.innerHTML = textStr;
dom.appendChild(btnTxt);
dom.classList.add('e-tbtn-txt');
}
else {
this.add(innerEle, 'e-tbtn-align');
}
if (item.prefixIcon || item.suffixIcon) {
if ((item.prefixIcon && item.suffixIcon) || item.prefixIcon) {
iconCss = item.prefixIcon + ' e-icons';
iconPos = 'left';
}
else {
iconCss = item.suffixIcon + ' e-icons';
iconPos = 'right';
}
}
new Button({ iconCss: iconCss, iconPosition: iconPos }, dom);
if (item.width) {
setStyle(dom, { 'width': formatUnit(item.width) });
}
return dom;
};
Toolbar.prototype.renderSubComponent = function (item) {
var innerEle;
var dom;
innerEle = buildTag('div', { className: CLASS_ITEM });
innerEle = buildTag('div', { className: CLS_ITEM });
if (!this.tbarEle) {

@@ -1051,28 +1118,3 @@ this.tbarEle = [];

case 'Button':
var textStr = item.text;
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 (textStr) {
btnTxt.innerHTML = textStr;
dom.appendChild(btnTxt);
}
else {
innerEle.classList.add('e-tbtn-align');
}
var btnObj = new Button({}, dom);
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';
}
}
btnObj.dataBind();
if (item.width) {
setStyleAttribute(dom, { 'width': formatUnit(item.width) });
}
dom = this.buttonRendering(item, innerEle);
dom.setAttribute('tabindex', '-1');

@@ -1083,3 +1125,3 @@ innerEle.appendChild(dom);

case 'Separator':
innerEle.classList.add(CLASS_SEPARATOR);
this.add(innerEle, CLS_SEPARATOR);
break;

@@ -1091,7 +1133,7 @@ }

if (sTxt === 'Toolbar') {
innerEle.classList.add(CLASS_POPUPTEXT);
innerEle.classList.add('e-tbtn-align');
this.add(innerEle, CLS_POPUPTEXT);
this.add(innerEle, 'e-tbtn-align');
}
else if (sTxt === 'Overflow') {
innerEle.classList.add(CLASS_TBARTEXT);
this.add(innerEle, CLS_TBARTEXT);
}

@@ -1102,7 +1144,7 @@ }

if (overflow === 'Show') {
innerEle.classList.add(CLASS_TBAROVERFLOW);
this.add(innerEle, CLS_TBAROVERFLOW);
}
else if (overflow === 'Hide') {
if (!innerEle.classList.contains(CLASS_SEPARATOR)) {
innerEle.classList.add(CLASS_POPOVERFLOW);
if (!innerEle.classList.contains(CLS_SEPARATOR)) {
this.add(innerEle, CLS_POPOVERFLOW);
}

@@ -1136,6 +1178,6 @@ }

}
if (this.popupObj) {
this.popupObj.hide();
if (this.popObj) {
this.popObj.hide();
}
var checkOverflow = this.checkOverflow(ele, ele.getElementsByClassName(CLASS_ITEMS)[0]);
var checkOverflow = this.checkOverflow(ele, ele.getElementsByClassName(CLS_ITEMS)[0]);
if (checkOverflow && this.scrollModule && (this.offsetWid === ele.offsetWidth)) {

@@ -1147,7 +1189,7 @@ return;

}
if (this.popupObj) {
if (this.popObj) {
if (this.tbarAlign) {
this.removePositioning();
}
this.popupRefresh(this.popupObj.element, false);
this.popupRefresh(this.popObj.element, false);
if (this.tbarAlign) {

@@ -1161,2 +1203,3 @@ this.refreshPositioning();

Toolbar.prototype.onPropertyChanged = function (newProp, oldProp) {
var tEle = this.element;
for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {

@@ -1171,43 +1214,32 @@ var prop = _a[_i];

case 'width':
var wid = this.element.offsetWidth;
setStyleAttribute(this.element, { 'width': formatUnit(newProp.width) });
var wid = tEle.offsetWidth;
setStyle(tEle, { 'width': formatUnit(newProp.width) });
this.renderOverflowMode();
if (this.popupObj && wid < this.element.offsetWidth) {
this.popupRefresh(this.popupObj.element, false);
if (this.popObj && wid < tEle.offsetWidth) {
this.popupRefresh(this.popObj.element, false);
}
break;
case 'height':
setStyleAttribute(this.element, { 'height': formatUnit(newProp.height) });
setStyle(this.element, { 'height': formatUnit(newProp.height) });
break;
case 'overflowMode':
if (this.scrollModule) {
this.scrollModule.element.classList.remove(CLASS_RTL);
this.remove(this.scrollModule.element, CLS_RTL);
this.destroyHScroll();
}
if (this.popupObj) {
this.popupRefresh(this.popupObj.element, true);
if (this.popObj) {
this.popupRefresh(this.popObj.element, true);
}
this.renderOverflowMode();
if (this.enableRtl) {
this.element.classList.add(CLASS_RTL);
this.add(tEle, CLS_RTL);
}
break;
case 'enableRtl':
if (newProp.enableRtl) {
this.element.classList.add(CLASS_RTL);
if (!isNOU(this.scrollModule)) {
this.scrollModule.element.classList.add(CLASS_RTL);
}
if (!isNOU(this.popupObj)) {
this.popupObj.element.classList.add(CLASS_RTL);
}
newProp.enableRtl ? this.add(tEle, CLS_RTL) : this.remove(tEle, CLS_RTL);
if (!isNOU(this.scrollModule)) {
newProp.enableRtl ? this.add(this.scrollModule.element, CLS_RTL) : this.remove(this.scrollModule.element, CLS_RTL);
}
else {
this.element.classList.remove(CLASS_RTL);
if (!isNOU(this.scrollModule)) {
this.scrollModule.element.classList.remove(CLASS_RTL);
}
if (!isNOU(this.popupObj)) {
this.popupObj.element.classList.remove(CLASS_RTL);
}
if (!isNOU(this.popObj)) {
newProp.enableRtl ? this.add(this.popObj.element, CLS_RTL) : this.remove(this.popObj.element, CLS_RTL);
}

@@ -1214,0 +1246,0 @@ break;

90

package.json
{
"_args": [
[
{
"raw": "@syncfusion/ej2-navigations@*",
"scope": "@syncfusion",
"escapedName": "@syncfusion%2fej2-navigations",
"name": "@syncfusion/ej2-navigations",
"rawSpec": "*",
"spec": "*",
"type": "range"
},
"C:\\Users\\ajithr\\Desktop\\ej2-release\\node_modules\\@syncfusion\\ej2"
]
],
"_from": "@syncfusion/ej2-navigations@*",
"_id": "@syncfusion/ej2-navigations@1.0.10",
"_inCache": true,
"_location": "/@syncfusion/ej2-navigations",
"_nodeVersion": "6.11.0",
"_npmUser": {
"name": "ej2",
"email": "pipeline@syncfusion.com"
},
"_npmVersion": "3.10.10",
"_phantomChildren": {},
"_requested": {
"raw": "@syncfusion/ej2-navigations@*",
"scope": "@syncfusion",
"escapedName": "@syncfusion%2fej2-navigations",
"name": "@syncfusion/ej2-navigations",
"rawSpec": "*",
"spec": "*",
"type": "range"
},
"_requiredBy": [
"/@syncfusion/ej2",
"/@syncfusion/ej2-ng-navigations"
],
"_resolved": "http://syncdeskn6525:8081/repository/ej2-production/@syncfusion/ej2-navigations/-/ej2-navigations-1.0.10.tgz",
"_shasum": "c513f0691c4441b3d11ea57ed81615679569c4ac",
"_shrinkwrap": null,
"_spec": "@syncfusion/ej2-navigations@*",
"_where": "C:\\Users\\ajithr\\Desktop\\ej2-release\\node_modules\\@syncfusion\\ej2",
"author": {
"name": "Syncfusion Inc."
},
"bugs": {
"url": "https://github.com/syncfusion/ej2-navigations/issues"
},
"name": "@syncfusion/ej2-navigations",
"version": "1.0.11",
"description": "Syncfusion TypeScript Navigation Components",
"author": "Syncfusion Inc.",
"license": "SEE LICENSE IN license",
"module": "dist/es6/index.js",
"dependencies": {
"@syncfusion/ej2-base": "^1.0.10",
"@syncfusion/ej2-buttons": "^1.0.10",
"@syncfusion/ej2-popups": "^1.0.10"
"@syncfusion/ej2-base": "^1.0.11",
"@syncfusion/ej2-buttons": "^1.0.11",
"@syncfusion/ej2-popups": "^1.0.11"
},
"description": "Essential JS 2 Navigation Components",
"devDependencies": {

@@ -63,8 +19,2 @@ "@types/chai": "^3.4.28",

},
"dist": {
"shasum": "c513f0691c4441b3d11ea57ed81615679569c4ac",
"tarball": "http://syncdeskn6525:8081/repository/ej2-production/@syncfusion/ej2-navigations/-/ej2-navigations-1.0.10.tgz"
},
"gitHead": "1f13dd5dc58ad2e96e8120bc8127bc94a3788f90",
"homepage": "https://github.com/syncfusion/ej2-navigations#readme",
"keywords": [

@@ -82,24 +32,6 @@ "ej2",

],
"license": "SEE LICENSE IN license",
"maintainers": [
{
"name": "ej2",
"email": "pipeline@syncfusion.com"
}
],
"module": "dist/es6/index.js",
"name": "@syncfusion/ej2-navigations",
"optionalDependencies": {},
"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": {
"type": "git",
"url": "git+https://github.com/syncfusion/ej2-navigations.git"
},
"scripts": {
"ci-publish": "gulp ci-publish",
"compile": "gulp ci-compile",
"test": "gulp ci-test"
},
"version": "1.0.10"
"url": "https://github.com/syncfusion/ej2-navigations.git"
}
}

4

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, classList } from '@syncfusion/ej2-base/dom'; import { getUniqueID } from '@syncfusion/ej2-base/util'; import { Browser } from '@syncfusion/ej2-base/browser';
import { Touch, ScrollEventArgs, TouchEventArgs, Component, EventHandler } from '@syncfusion/ej2-base';import { NotifyPropertyChanges, INotifyPropertyChanged, Property, Browser } from '@syncfusion/ej2-base';import { createElement as buildTag, detach, classList } from '@syncfusion/ej2-base/dom';import { getUniqueID } from '@syncfusion/ej2-base/util';
import {ComponentModel} from '@syncfusion/ej2-base';

@@ -10,4 +10,4 @@

/**
* Specifies the left or right scrolling distance of the horizontal scrollbar moving. * @default '40' */ scrollStep?: number;
* Specifies the left or right scrolling distance of the horizontal scrollbar moving. * @default '40' */ scrollStep?: number;
}

14

src/common/h-scroll.d.ts

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

import { Component } from '@syncfusion/ej2-base/component';
import { INotifyPropertyChanged } from '@syncfusion/ej2-base/notify-property-change';
import { Component } from '@syncfusion/ej2-base';
import { INotifyPropertyChanged } from '@syncfusion/ej2-base';
import { HScrollModel } from './h-scroll-model';

@@ -24,2 +24,3 @@ /**

private browserCheck;
private ieCheck;
/**

@@ -59,9 +60,10 @@ * Specifies the left or right scrolling distance of the horizontal scrollbar moving.

destroy(): void;
private createNavigationIcon(element, classList);
private createNavIcon(element, classList);
private repeatScroll(e);
private tabHoldHandler(e);
private contentScrolling(scrollDis, trgt);
private contains(ele, className);
private eleScrolling(scrollDis, trgt);
private clickEventHandler(e);
private touchScrollHandler(e);
private scrollEventHandler(e);
private touchHandler(e);
private scrollHandler(e);
/**

@@ -68,0 +70,0 @@ * Gets called when the model property changes.The data that describes the old and new values of property that changed.

127

src/common/h-scroll.js

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

};
define(["require", "exports", "@syncfusion/ej2-base/component", "@syncfusion/ej2-base/touch", "@syncfusion/ej2-base/event-handler", "@syncfusion/ej2-base/notify-property-change", "@syncfusion/ej2-base/dom", "@syncfusion/ej2-base/util", "@syncfusion/ej2-base/browser"], function (require, exports, component_1, touch_1, event_handler_1, notify_property_change_1, dom_1, util_1, browser_1) {
define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-base/dom", "@syncfusion/ej2-base/util"], function (require, exports, ej2_base_1, ej2_base_2, dom_1, util_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
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 CLS_ROOT = 'e-hscroll';
var CLS_RTL = 'e-rtl';
var CLS_HSCROLLBAR = 'e-hscroll-bar';
var CLS_HSCROLLCON = 'e-hscroll-content';
var CLS_NAVARROW = 'e-nav-arrow';
var CLS_NAVRIGHTARROW = 'e-nav-right-arrow';
var CLS_NAVLEFTARROW = 'e-nav-left-arrow';
var CLS_HSCROLLNAV = 'e-hor-nav';
var HScroll = (function (_super) {

@@ -35,20 +35,22 @@ __extends(HScroll, _super);

HScroll.prototype.preRender = function () {
this.browser = browser_1.Browser.info.name;
this.browser = ej2_base_2.Browser.info.name;
this.browserCheck = this.browser === 'mozilla';
var element = this.element;
this.ieCheck = this.browser === 'edge' || this.browser === 'msie';
this.initialize();
if (this.element.id === '') {
this.element.id = util_1.getUniqueID('hscroll');
if (element.id === '') {
element.id = util_1.getUniqueID('hscroll');
this.uniqueId = true;
}
this.element.style.display = 'block';
element.style.display = 'block';
if (this.enableRtl) {
this.element.classList.add(CLASS_RTL);
element.classList.add(CLS_RTL);
}
};
HScroll.prototype.render = function () {
this.createNavigationIcon(this.element, CLASS_NAVRIGHTARROW + ' ' + CLASS_NAVARROW);
this.createNavIcon(this.element, CLS_NAVRIGHTARROW + ' ' + CLS_NAVARROW);
};
HScroll.prototype.initialize = function () {
var scrollEle = dom_1.createElement('div', { className: CLASS_HSCROLLCON });
var scrollDiv = dom_1.createElement('div', { className: CLASS_HSCROLLBAR });
var scrollEle = dom_1.createElement('div', { className: CLS_HSCROLLCON });
var scrollDiv = dom_1.createElement('div', { className: CLS_HSCROLLBAR });
var ele = this.element;

@@ -76,5 +78,5 @@ var innerEle = [].slice.call(ele.children);

ele.style.display = '';
ele.classList.remove(CLASS_ROOT);
ele.classList.remove(CLS_ROOT);
var nav = ele.querySelector('#' + ele.id + '_nav.e-' + ele.id + '_nav');
event_handler_1.EventHandler.remove(nav, 'click', this.clickEventHandler);
ej2_base_1.EventHandler.remove(nav, 'click', this.clickEventHandler);
for (var _i = 0, _a = [].slice.call(this.scrollItems.children); _i < _a.length; _i++) {

@@ -89,3 +91,3 @@ var elem = _a[_i];

nav.parentElement.removeChild(nav);
event_handler_1.EventHandler.remove(this.scrollEle, 'scroll', this.scrollEventHandler);
ej2_base_1.EventHandler.remove(this.scrollEle, 'scroll', this.scrollHandler);
this.touchModule.destroy();

@@ -95,5 +97,5 @@ this.touchModule = null;

};
HScroll.prototype.createNavigationIcon = function (element, classList) {
HScroll.prototype.createNavIcon = function (element, classList) {
var id = element.id.concat('_nav');
var className = 'e-' + element.id.concat('_nav ' + CLASS_HSCROLLNAV);
var className = 'e-' + element.id.concat('_nav ' + CLS_HSCROLLNAV);
var nav = dom_1.createElement('div', { id: id, className: className });

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

element.insertBefore(nav, element.firstChild);
event_handler_1.EventHandler.add(this.scrollEle, 'scroll', this.scrollEventHandler, this);
new touch_1.Touch(nav, { taphold: this.tabHoldHandler.bind(this) });
if (browser_1.Browser.info.name === 'msie') {
ej2_base_1.EventHandler.add(this.scrollEle, 'scroll', this.scrollHandler, this);
new ej2_base_1.Touch(nav, { tapHold: this.tabHoldHandler.bind(this) });
if (this.ieCheck) {
nav.classList.add('e-ie-align');

@@ -115,4 +117,4 @@ }

});
event_handler_1.EventHandler.add(nav, 'click', this.clickEventHandler, this);
this.touchModule = new touch_1.Touch(element, { scroll: this.touchScrollHandler.bind(this) });
ej2_base_1.EventHandler.add(nav, 'click', this.clickEventHandler, this);
this.touchModule = new ej2_base_1.Touch(element, { scroll: this.touchHandler.bind(this) });
};

@@ -125,6 +127,6 @@ HScroll.prototype.repeatScroll = function (e) {

var trgt = e.originalEvent.target;
trgt = trgt.classList.contains(CLASS_HSCROLLNAV) ? trgt.firstElementChild : trgt;
trgt = this.contains(trgt, CLS_HSCROLLNAV) ? trgt.firstElementChild : trgt;
var timeoutFun = function () {
var scrollDis = 10;
_this.contentScrolling(scrollDis, trgt);
_this.eleScrolling(scrollDis, trgt);
};

@@ -135,25 +137,30 @@ this.timeout = setInterval(function () {

};
HScroll.prototype.contentScrolling = function (scrollDis, trgt) {
HScroll.prototype.contains = function (ele, className) {
return ele.classList.contains(className);
};
HScroll.prototype.eleScrolling = function (scrollDis, trgt) {
var element = this.scrollEle;
var rootEle = this.element;
var classList = trgt.classList;
if (classList.contains(CLASS_HSCROLLNAV)) {
classList = this.element.querySelector('.' + CLASS_NAVARROW).classList;
if (classList.contains(CLS_HSCROLLNAV)) {
classList = this.element.querySelector('.' + CLS_NAVARROW).classList;
}
if (this.element.classList.contains(CLASS_RTL) && this.browserCheck) {
if (this.contains(rootEle, CLS_RTL) && this.browserCheck) {
scrollDis = -scrollDis;
}
if ((!this.element.classList.contains(CLASS_RTL) || this.browserCheck) || this.browser === 'edge') {
if (classList.contains(CLASS_NAVRIGHTARROW)) {
element.scrollLeft = element.scrollLeft + scrollDis;
var scrlLeft = element.scrollLeft;
if ((!this.contains(rootEle, CLS_RTL) || this.browserCheck) || this.ieCheck) {
if (classList.contains(CLS_NAVRIGHTARROW)) {
element.scrollLeft = scrlLeft + scrollDis;
}
else {
element.scrollLeft = element.scrollLeft - scrollDis;
element.scrollLeft = scrlLeft - scrollDis;
}
}
else {
if (classList.contains(CLASS_NAVLEFTARROW)) {
element.scrollLeft = element.scrollLeft + scrollDis;
if (classList.contains(CLS_NAVLEFTARROW)) {
element.scrollLeft = scrlLeft + scrollDis;
}
else {
element.scrollLeft = element.scrollLeft - scrollDis;
element.scrollLeft = scrlLeft - scrollDis;
}

@@ -163,9 +170,9 @@ }

HScroll.prototype.clickEventHandler = function (e) {
this.contentScrolling(this.scrollStep, e.target);
this.eleScrolling(this.scrollStep, e.target);
};
HScroll.prototype.touchScrollHandler = function (e) {
HScroll.prototype.touchHandler = function (e) {
var ele = this.scrollEle;
var distance;
distance = e.distanceX;
if (this.browser === 'edge') {
if ((this.ieCheck) && this.contains(this.element, CLS_RTL)) {
distance = -distance;

@@ -180,7 +187,8 @@ }

};
HScroll.prototype.scrollEventHandler = function (e) {
HScroll.prototype.scrollHandler = function (e) {
var target = e.target;
var width = target.offsetWidth;
var navElement = this.element.firstChild.firstChild;
if (navElement) {
var rootEle = this.element;
var navEle = this.element.firstChild.firstChild;
if (navEle) {
var scrollLeft = target.scrollLeft;

@@ -191,25 +199,18 @@ if (scrollLeft <= 0) {

if (scrollLeft === 0) {
if ((!this.element.classList.contains(CLASS_RTL) || this.browserCheck) || this.browser === 'edge') {
dom_1.classList(navElement, [CLASS_NAVRIGHTARROW], [CLASS_NAVLEFTARROW]);
if ((!this.contains(rootEle, CLS_RTL) || this.browserCheck) || this.ieCheck) {
dom_1.classList(navEle, [CLS_NAVRIGHTARROW], [CLS_NAVLEFTARROW]);
}
else {
dom_1.classList(navElement, [CLASS_NAVLEFTARROW], [CLASS_NAVRIGHTARROW]);
dom_1.classList(navEle, [CLS_NAVLEFTARROW], [CLS_NAVRIGHTARROW]);
}
}
else if (Math.ceil(width + scrollLeft) >= target.scrollWidth) {
if ((!this.element.classList.contains(CLASS_RTL) || this.browserCheck) || this.browser === 'edge') {
dom_1.classList(navElement, [CLASS_NAVLEFTARROW], [CLASS_NAVRIGHTARROW]);
if ((!this.contains(rootEle, CLS_RTL) || this.browserCheck) || this.ieCheck) {
dom_1.classList(navEle, [CLS_NAVLEFTARROW], [CLS_NAVRIGHTARROW]);
}
else {
dom_1.classList(navElement, [CLASS_NAVRIGHTARROW], [CLASS_NAVLEFTARROW]);
dom_1.classList(navEle, [CLS_NAVRIGHTARROW], [CLS_NAVLEFTARROW]);
}
}
else {
return;
}
return;
}
else {
return;
}
};

@@ -223,3 +224,3 @@ HScroll.prototype.onPropertyChanged = function (newProp, oldProp) {

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

@@ -230,10 +231,10 @@ }

return HScroll;
}(component_1.Component));
}(ej2_base_1.Component));
__decorate([
notify_property_change_1.Property(40)
ej2_base_2.Property(40)
], HScroll.prototype, "scrollStep", void 0);
HScroll = __decorate([
notify_property_change_1.NotifyPropertyChanges
ej2_base_2.NotifyPropertyChanges
], HScroll);
exports.HScroll = HScroll;
});

46

src/toolbar/toolbar-model.d.ts

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

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 { Component, EventHandler, Property, Event, EmitType, BaseEventArgs } from '@syncfusion/ej2-base';import { addClass, removeClass, isVisible, closest, attributes, detach, classList } from '@syncfusion/ej2-base/dom';import { createElement as buildTag, selectAll, setStyleAttribute as setStyle } 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, Browser } from '@syncfusion/ej2-base';import { Popup } from '@syncfusion/ej2-popups';import { calculatePosition } from '@syncfusion/ej2-popups/src/common/position';import { Button, IconPosition } from '@syncfusion/ej2-buttons';import { HScroll } from '../common/h-scroll';import { ToolbarHelper } from './toolbar-builder';
import {OverflowOption,ItemType,DisplayMode,ItemAlign,OverflowMode,ClickEventArgs} from "./toolbar";

@@ -11,39 +11,39 @@ import {ComponentModel} from '@syncfusion/ej2-base';

/**
* Specifies the unique id to be used with button or input element of toolbar items. * @default "" */ id?: string;
* Specifies the unique id to be used with button or input element of toolbar items. * @default "" */ id?: string;
/**
* Specifies the text to be displayed on 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 commands. * @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 ) are to be used for commands customization. * @default "" */ cssClass?: string;
* Defines single / multiple classes (separated by space ) are to be used for commands customization. * @default "" */ cssClass?: string;
/**
* 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. * @default "" */ prefixIcon?: string;
* 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. * @default "" */ prefixIcon?: string;
/**
* 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. * @default "" */ suffixIcon?: string;
* 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. * @default "" */ suffixIcon?: string;
/**
* 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. * @default 'None' */ overflow?: OverflowOption;
* 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. * @default 'None' */ overflow?: OverflowOption;
/**
* 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' }] * ``` * @default "" */ template?: string | Object;
* 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' }] * ``` * @default "" */ template?: string | Object;
/**
* 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;
* 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;
/**
* 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*. * @default 'Both' */ showTextOn?: DisplayMode;
* 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*. * @default 'Both' */ showTextOn?: DisplayMode;
/**
* Defines a htmlAttributes which can be used for adding custom attributes to toolbar command. * Supports HTML attributes such as style, class, etc. * @default 'null' */ htmlAttributes?: { [key: string]: string; };
* Defines a htmlAttributes which can be used for adding custom attributes to toolbar command. * Supports HTML attributes such as style, class, etc. * @default 'null' */ htmlAttributes?: { [key: string]: string; };
/**
* Sets the text that appears as a html 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;
* Specifies the location for aligning toolbar 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 items. * - Right - Places the items to the `right` end of the toolbar * @default "left" */ align?: ItemAlign;

@@ -58,28 +58,28 @@ }

/**
* An array of item that is used to configure toolbar commands. * @default [] */ items?: ItemModel[];
* An array of item that is used to configure toolbar commands. * @default [] */ items?: ItemModel[];
/**
* Specifies the width of the toolbar in pixels/number/percentage. Number value is considered as pixels. * @default 'auto' */ width?: string | number;
* Specifies the width of the toolbar in pixels/number/percentage. Number value is considered as pixels. * @default 'auto' */ width?: string | number;
/**
* Specifies the height of the toolbar in pixels/number/percentage. Number value is considered as pixels. * @default 'auto' */ height?: string | number;
* Specifies the height of the toolbar in pixels/number/percentage. Number value is considered as pixels. * @default 'auto' */ height?: string | number;
/**
* Specifies the toolbar display mode when toolbar content exceeds the viewing area. * Possible modes are: * - Scrollable - All the elements are displayed in a single line with horizontal scrolling enabled. * - Popup - Prioritized elements are displayed in toolbar and rest of elements are moved to *popup*. * If the popup content overflows the height of the page, the rest of the elements will be hidden. * @default 'Scrollable' */ overflowMode?: OverflowMode;
* Specifies the toolbar display mode when toolbar content exceeds the viewing area. * Possible modes are: * - Scrollable - All the elements are displayed in a single line with horizontal scrolling enabled. * - Popup - Prioritized elements are displayed in toolbar and rest of elements are moved to *popup*. * If the popup content overflows the height of the page, the rest of the elements will be hidden. * @default 'Scrollable' */ overflowMode?: OverflowMode;
/**
* Specifies the direction of the toolbar commands. 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<ClickEventArgs>;
* The event will be fired while clicking on the toolbar elements. * @event */ clicked?: EmitType<ClickEventArgs>;
/**
* The event will be fired once the control 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 control 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 control rendered on a page. * @event */ beforeCreate?: EmitType<Event>;
* The event will be fired before the control rendered on a page. * @event */ beforeCreate?: EmitType<Event>;
}

59

src/toolbar/toolbar.d.ts

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

import { Component, EmitType } from '@syncfusion/ej2-base';
import { Component, EmitType, BaseEventArgs } from '@syncfusion/ej2-base';
import { INotifyPropertyChanged, ChildProperty } from '@syncfusion/ej2-base';

@@ -22,5 +22,10 @@ import { ToolbarModel, ItemModel } from './toolbar-model';

export declare type ItemAlign = 'left' | 'center' | 'right';
export interface ClickEventArgs {
/** @hidden */
export interface ToolbarItemAlignIn {
lefts: HTMLElement[];
centers: HTMLElement[];
rights: HTMLElement[];
}
export interface ClickEventArgs extends BaseEventArgs {
item: ItemModel;
eventName: string;
originalEvent: Event;

@@ -114,7 +119,7 @@ }

/**
* Specifies the location for aligning items in the toolbar. Each command will be aligned according to the `align` property.
* Specifies the location for aligning toolbar 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.
* - Center - Places the items to the `center` to the toolbar items.
* - Right - Places the items to the `right` end of the toolbar
* @default "left"

@@ -136,5 +141,14 @@ */

private trgtEle;
private popupObj;
/** @hidden */
private popObj;
/** @hidden */
private tbarEle;
/** @hidden */
private tbarAlgEle;
/** @hidden */
private tbarAlign;
/** @hidden */
private tbarEleMrgn;
/** @hidden */
private tbResize;
private offsetWid;

@@ -144,6 +158,2 @@ private keyModule;

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

@@ -203,3 +213,3 @@ * Contains the keyboard configuration of the toolbar.

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

@@ -221,6 +231,10 @@ */

private unwireEvents();
private docEvent(e);
private destroyHScroll();
private add(ele, val);
private remove(ele, val);
private keyActionHandler(e);
private eleFocus(closest, pos);
private clickEventHandler(e);
private clickHandler(e);
private popupClickHandler(ele, popupNav, CLS_RTL);
/**

@@ -234,13 +248,16 @@ * To Initialize the control rendering

private initHScroll(element, innerItems);
private itemWidthCal(innerItem);
private itemWidthCal(items);
private checkOverflow(element, innerItem);
private renderOverflowMode();
private checkPriority(ele, inEle, eleWidth, pre);
private createOverflowIcon(ele, innerEle);
private createPopupIcon(element);
private createPopupEle(ele, innerEle);
private pushingPoppedEle(tbarObj, popupPri, ele, eleHeight);
private createPopup();
private initPopup(element, ele);
private docEvent(e);
private popupInit(element, ele);
private popupOpen(e);
private popupClose(e);
private checkPriority(ele, inEle, eleWidth, pre);
private createPopupIcon(element);
private tbarPriRef(inEle, indx, sepPri, el, des, elWid, wid);
private popupRefresh(popupEle, destroy);
private popupEleRefresh(width, popupEle, destroy);
private removePositioning();

@@ -250,6 +267,5 @@ private refreshPositioning();

private tbarItemAlign(item, itemEle, pos);
private ctrlTemplate();
private renderItems();
private setAttr(attr, element);
private popupEleRefresh(width, popupEle, destroy);
private popupRefresh(popupEle, destroy);
/**

@@ -278,2 +294,3 @@ * Enables or disables the specified toolbar item.

private templateRender(templateProp, innerEle, item);
private buttonRendering(item, innerEle);
private renderSubComponent(item);

@@ -280,0 +297,0 @@ private itemClick(e);

996

src/toolbar/toolbar.js

@@ -17,29 +17,29 @@ var __extends = (this && this.__extends) || (function () {

};
define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base/dom", "@syncfusion/ej2-base/dom", "@syncfusion/ej2-base/util", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-popups/src/common/position", "@syncfusion/ej2-popups", "@syncfusion/ej2-buttons", "../common/h-scroll"], function (require, exports, ej2_base_1, dom_1, dom_2, util_1, ej2_base_2, ej2_base_3, position_1, ej2_popups_1, ej2_buttons_1, h_scroll_1) {
define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-base/dom", "@syncfusion/ej2-base/dom", "@syncfusion/ej2-base/util", "@syncfusion/ej2-base", "@syncfusion/ej2-base", "@syncfusion/ej2-popups", "@syncfusion/ej2-popups/src/common/position", "@syncfusion/ej2-buttons", "../common/h-scroll"], function (require, exports, ej2_base_1, dom_1, dom_2, util_1, ej2_base_2, ej2_base_3, ej2_popups_1, position_1, ej2_buttons_1, h_scroll_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
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 CLS_ITEMS = 'e-toolbar-items';
var CLS_ITEM = 'e-toolbar-item';
var CLS_RTL = 'e-rtl';
var CLS_SEPARATOR = 'e-separator';
var CLS_POPUPICON = 'e-popup-up-icon';
var CLS_POPUPDOWN = 'e-popup-down-icon';
var CLS_TEMPLATE = 'e-template';
var CLS_DISABLE = 'e-overlay';
var CLS_POPUPTEXT = 'e-toolbar-text';
var CLS_TBARTEXT = 'e-popup-text';
var CLS_TBAROVERFLOW = 'e-overflow-show';
var CLS_POPOVERFLOW = 'e-overflow-hide';
var CLS_TBARBTN = 'e-tbar-btn';
var CLS_TBARNAV = 'e-hor-nav';
var CLS_TBARRIGHT = 'e-toolbar-right';
var CLS_TBARLEFT = 'e-toolbar-left';
var CLS_TBARCENTER = 'e-toolbar-center';
var CLS_TBARPOS = 'e-tbar-pos';
var CLS_TBARSCROLL = 'e-hscroll-content';
var CLS_POPUPNAV = 'e-hor-nav';
var CLS_POPUPCLASS = 'e-toolbar-pop';
var CLS_POPUP = 'e-toolbar-popup';
var CLS_TBARBTNTEXT = 'e-tbar-btn-text';
var CLS_TBARNAVACT = 'e-nav-active';
var Item = (function (_super) {

@@ -119,7 +119,7 @@ __extends(Item, _super);

if (this.enableRtl) {
this.element.classList.add('e-rtl');
this.add(this.element, CLS_RTL);
}
};
Toolbar.prototype.wireEvents = function () {
ej2_base_1.EventHandler.add(this.element, 'click', this.clickEventHandler, this);
ej2_base_1.EventHandler.add(this.element, 'click', this.clickHandler, this);
window.onresize = this.resize.bind(this);

@@ -133,6 +133,6 @@ this.keyModule = new ej2_base_3.KeyboardEvents(this.element, {

Toolbar.prototype.unwireEvents = function () {
ej2_base_1.EventHandler.remove(this.element, 'click', this.clickEventHandler);
ej2_base_1.EventHandler.remove(this.element, 'click', this.clickHandler);
this.destroyHScroll();
this.keyModule.destroy();
if (this.popupObj) {
if (this.popObj) {
ej2_base_1.EventHandler.remove(document, 'scroll', this.docEvent);

@@ -142,6 +142,12 @@ ej2_base_1.EventHandler.remove(document, 'click', this.docEvent);

};
Toolbar.prototype.docEvent = function (e) {
var popEle = dom_1.closest(e.target, '.e-popup');
if (this.popObj && dom_1.isVisible(this.popObj.element) && !popEle) {
this.popObj.hide({ name: 'SlideUp', duration: 100 });
}
};
Toolbar.prototype.destroyHScroll = function () {
if (this.scrollModule) {
if (this.tbarAlign) {
this.scrollModule.element.classList.add(CLASS_TBARPOS);
this.add(this.scrollModule.element, CLS_TBARPOS);
}

@@ -152,2 +158,8 @@ this.scrollModule.destroy();

};
Toolbar.prototype.add = function (ele, val) {
ele.classList.add(val);
};
Toolbar.prototype.remove = function (ele, val) {
ele.classList.remove(val);
};
Toolbar.prototype.keyActionHandler = function (e) {

@@ -158,11 +170,13 @@ e.preventDefault();

var rootEle = this.element;
var popupObj = this.popupObj;
if (trgt.classList.contains(CLASS_TBARNAV) && popupObj && dom_1.isVisible(popupObj.element)) {
clst = popupObj.element.querySelector('.' + CLASS_ITEM);
var popObj = this.popObj;
var popAnimate = { name: 'SlideUp', duration: 100 };
var tbrNavChk = trgt.classList.contains(CLS_TBARNAV);
if (tbrNavChk && popObj && dom_1.isVisible(popObj.element)) {
clst = popObj.element.querySelector('.' + CLS_ITEM);
}
else if (rootEle === trgt || trgt.classList.contains(CLASS_TBARNAV)) {
clst = rootEle.querySelector('.' + CLASS_ITEM);
else if (rootEle === trgt || tbrNavChk) {
clst = rootEle.querySelector('.' + CLS_ITEM);
}
else {
clst = dom_1.closest(trgt, '.' + CLASS_ITEM);
clst = dom_1.closest(trgt, '.' + CLS_ITEM);
}

@@ -172,3 +186,3 @@ if (clst) {

case 'moveRight':
if (rootEle === trgt || trgt.classList.contains(CLASS_TBARNAV)) {
if (rootEle === trgt || tbrNavChk) {
clst.firstChild.focus();

@@ -181,7 +195,7 @@ }

case 'moveLeft':
if (popupObj && trgt.classList.contains(CLASS_TBARNAV)) {
if (popObj && tbrNavChk) {
if (this.tbarAlign) {
clst = dom_1.closest(clst, '.' + CLASS_ITEMS);
var innerItems = dom_2.selectAll('.' + CLASS_ITEM, clst);
clst = innerItems[innerItems.length - 1];
clst = dom_1.closest(clst, '.' + CLS_ITEMS);
var items = dom_2.selectAll('.' + CLS_ITEM, clst);
clst = items[items.length - 1];
}

@@ -192,3 +206,3 @@ else {

}
if (trgt.classList.contains(CLASS_TBARNAV) && !clst.classList.contains(CLASS_SEPARATOR)) {
if (tbrNavChk && !clst.classList.contains(CLS_SEPARATOR) && !clst.classList.contains(CLS_DISABLE)) {
clst.firstChild.focus();

@@ -201,16 +215,13 @@ }

case 'moveUp':
if (popupObj && dom_1.closest(trgt, '.e-popup')) {
if (popupObj.element.firstElementChild === clst) {
rootEle.querySelector('.' + CLASS_TBARNAV).focus();
case 'moveDown':
var value = e.action === 'moveUp' ? 'previous' : 'next';
if (popObj && dom_1.closest(trgt, '.e-popup')) {
if (e.action === 'moveUp' && popObj.element.firstElementChild === clst) {
rootEle.querySelector('.' + CLS_TBARNAV).focus();
}
else {
this.eleFocus(clst, 'previous');
this.eleFocus(clst, value);
}
}
break;
case 'moveDown':
if (popupObj && dom_1.closest(trgt, '.e-popup')) {
this.eleFocus(clst, 'next');
}
else if (popupObj && dom_1.isVisible(popupObj.element)) {
else if (e.action === 'moveDown') {
clst.firstChild.focus();

@@ -221,3 +232,3 @@ }

var ele = clst.firstChild;
if (rootEle === trgt || trgt.classList.contains(CLASS_TBARNAV)) {
if (rootEle === trgt || tbrNavChk) {
if (this.activeEle) {

@@ -233,16 +244,16 @@ this.activeEle.focus();

case 'popupClose':
if (popupObj) {
popupObj.hide({ name: 'SlideUp', duration: 100 });
if (popObj) {
popObj.hide(popAnimate);
}
break;
case 'popupOpen':
if (!trgt.classList.contains(CLASS_TBARNAV)) {
if (!tbrNavChk) {
return;
}
if (popupObj && !dom_1.isVisible(popupObj.element)) {
popupObj.element.style.top = rootEle.offsetHeight + 'px';
popupObj.show({ name: 'SlideDown', duration: 100 });
if (popObj && !dom_1.isVisible(popObj.element)) {
popObj.element.style.top = rootEle.offsetHeight + 'px';
popObj.show({ name: 'SlideDown', duration: 100 });
}
else {
popupObj.hide({ name: 'SlideUp', duration: 100 });
popObj.hide(popAnimate);
}

@@ -255,12 +266,19 @@ break;

var sib = Object(closest)[pos + 'ElementSibling'];
var contains = function (el) {
return el.classList.contains(CLS_SEPARATOR) || el.classList.contains(CLS_DISABLE);
};
if (sib) {
if (sib.classList.contains(CLASS_SEPARATOR)) {
var skipEle = contains(sib);
if (skipEle) {
if (Object(sib)[pos + 'Sibling']) {
sib = Object(sib)[pos + 'Sibling'];
if (sib.classList.contains(CLASS_SEPARATOR)) {
skipEle = contains(sib);
if (skipEle) {
this.eleFocus(sib, pos);
return;
}
}
else if (this.popupObj && pos === 'next') {
this.element.querySelector('.' + CLASS_TBARNAV).focus();
else if (this.popObj && pos === 'next') {
this.element.querySelector('.' + CLS_TBARNAV).focus();
return;
}

@@ -276,57 +294,75 @@ }

if (pos === 'next') {
elem.querySelector('.' + CLASS_ITEM).firstChild.focus();
var el = elem.querySelector('.' + CLS_ITEM);
if (contains(el)) {
this.eleFocus(el, pos);
}
else {
el.firstChild.focus();
}
}
else {
elem.lastElementChild.firstChild.focus();
var el = elem.lastElementChild;
if (contains(el)) {
this.eleFocus(el, pos);
}
else {
el.firstChild.focus();
}
}
}
else if (this.popupObj) {
this.element.querySelector('.' + CLASS_TBARNAV).focus();
else if (this.popObj) {
this.element.querySelector('.' + CLS_TBARNAV).focus();
}
}
else if (this.popupObj && pos === 'next') {
this.element.querySelector('.' + CLASS_TBARNAV).focus();
else if (this.popObj && pos === 'next') {
this.element.querySelector('.' + CLS_TBARNAV).focus();
}
};
Toolbar.prototype.clickEventHandler = function (e) {
Toolbar.prototype.clickHandler = function (e) {
var trgt = e.target;
var clsList = trgt.classList;
var ele = this.element;
var popObj = this.popupObj;
var popupNav = dom_1.closest(trgt, ('.' + CLASS_TBARNAV));
var popupNav = dom_1.closest(trgt, ('.' + CLS_TBARNAV));
if (!popupNav) {
popupNav = trgt;
}
if (!ele.children[0].classList.contains('e-hscroll') && (clsList.contains(CLASS_TBARNAV))) {
if (!ele.children[0].classList.contains('e-hscroll') && (clsList.contains(CLS_TBARNAV))) {
clsList = trgt.querySelector('.e-icons').classList;
}
if (clsList.contains(CLASS_POPUPICON) || clsList.contains(CLASS_POPUPDOWN)) {
if (dom_1.isVisible(popObj.element)) {
popupNav.classList.remove(CLASS_TBARNAVACT);
popObj.hide({ name: 'SlideUp', duration: 100 });
}
else {
if (ele.classList.contains(CLASS_RTL)) {
popObj.enableRtl = true;
popObj.position = { X: 'left', Y: 'top' };
}
if (popObj.offsetX === 0 && !ele.classList.contains(CLASS_RTL)) {
popObj.enableRtl = false;
popObj.position = { X: 'right', Y: 'top' };
}
popObj.dataBind();
popObj.element.style.top = this.element.offsetHeight + 'px';
popupNav.classList.add(CLASS_TBARNAVACT);
popObj.show({ name: 'SlideDown', duration: 100 });
}
if (clsList.contains(CLS_POPUPICON) || clsList.contains(CLS_POPUPDOWN)) {
this.popupClickHandler(ele, popupNav, CLS_RTL);
}
var itemObj;
var clst = dom_1.closest(e.target, '.' + CLASS_ITEM);
var clst = dom_1.closest(e.target, '.' + CLS_ITEM);
if ((util_1.isNullOrUndefined(clst) || clst.classList.contains(CLS_DISABLE)) && !popupNav.classList.contains(CLS_TBARNAV)) {
return;
}
if (clst) {
itemObj = this.items[this.sliceFn.call(clst.parentElement.children).indexOf(clst)];
itemObj = this.items[this.tbarEle.indexOf(clst)];
}
var eventArgs = { eventName: 'clicked', originalEvent: e, item: itemObj };
var eventArgs = { originalEvent: e, item: itemObj };
this.trigger('clicked', eventArgs);
};
;
Toolbar.prototype.popupClickHandler = function (ele, popupNav, CLS_RTL) {
var popObj = this.popObj;
if (dom_1.isVisible(popObj.element)) {
popupNav.classList.remove(CLS_TBARNAVACT);
popObj.hide({ name: 'SlideUp', duration: 100 });
}
else {
if (ele.classList.contains(CLS_RTL)) {
popObj.enableRtl = true;
popObj.position = { X: 'left', Y: 'top' };
}
if (popObj.offsetX === 0 && !ele.classList.contains(CLS_RTL)) {
popObj.enableRtl = false;
popObj.position = { X: 'right', Y: 'top' };
}
popObj.dataBind();
popObj.element.style.top = this.element.offsetHeight + 'px';
popupNav.classList.add(CLS_TBARNAVACT);
popObj.show({ name: 'SlideDown', duration: 100 });
}
};
Toolbar.prototype.render = function () {

@@ -340,3 +376,6 @@ this.initialize();

var height = util_1.formatUnit(this.height);
dom_1.setStyleAttribute(this.element, { 'width': width, 'height': height });
if (ej2_base_3.Browser.info.name !== 'msie' || this.height !== 'auto') {
dom_2.setStyleAttribute(this.element, { 'height': height });
}
dom_2.setStyleAttribute(this.element, { 'width': width });
var ariaAttr = {

@@ -349,4 +388,3 @@ 'role': 'toolbar', 'aria-disabled': 'false', 'aria-haspopup': 'false', 'aria-orientation': 'horizontal',

this.trgtEle = (this.element.children.length > 0) ? this.element.querySelector('div') : null;
this.tbarAlgEle = { left: [], center: [], right: [] };
this.sliceFn = [].slice;
this.tbarAlgEle = { lefts: [], centers: [], rights: [] };
this.renderItems();

@@ -361,12 +399,12 @@ this.renderOverflowMode();

if (this.tbarAlign) {
this.element.querySelector('.' + CLASS_ITEMS + ' .' + CLASS_TBARCENTER).removeAttribute('style');
this.element.querySelector('.' + CLS_ITEMS + ' .' + CLS_TBARCENTER).removeAttribute('style');
}
this.scrollModule = new h_scroll_1.HScroll({ scrollStep: 50, enableRtl: this.enableRtl }, innerItems[0]);
this.scrollModule.element.classList.remove(CLASS_TBARPOS);
dom_1.setStyleAttribute(this.element, { overflow: 'hidden' });
this.remove(this.scrollModule.element, CLS_TBARPOS);
dom_2.setStyleAttribute(this.element, { overflow: 'hidden' });
}
};
Toolbar.prototype.itemWidthCal = function (innerItem) {
Toolbar.prototype.itemWidthCal = function (items) {
var width = 0;
this.sliceFn.call(innerItem.children).forEach(function (el) {
[].slice.call(items.children).forEach(function (el) {
width += el.offsetWidth;

@@ -383,3 +421,3 @@ });

if (this.tbarAlign) {
itemWidth = this.itemWidthCal(innerItem);
itemWidth = this.itemWidthCal(this.scrollModule ? innerItem.querySelector('.e-hscroll-content') : innerItem);
}

@@ -389,3 +427,3 @@ else {

}
var popNav = element.querySelector('.' + CLASS_TBARNAV);
var popNav = element.querySelector('.' + CLS_TBARNAV);
if (itemWidth > eleWidth - (popNav ? popNav.offsetWidth : 0)) {

@@ -400,3 +438,3 @@ return true;

var ele = this.element;
var innerItems = ele.querySelector('.' + CLASS_ITEMS);
var innerItems = ele.querySelector('.' + CLS_ITEMS);
if (ele && ele.children.length > 0) {

@@ -407,6 +445,6 @@ this.offsetWid = ele.offsetWidth;

this.destroyHScroll();
this.initHScroll(ele, ele.getElementsByClassName(CLASS_ITEMS));
this.initHScroll(ele, ele.getElementsByClassName(CLS_ITEMS));
break;
case 'Popup':
this.element.classList.add('e-toolpop');
this.add(this.element, 'e-toolpop');
if (this.tbarAlign) {

@@ -416,7 +454,7 @@ this.removePositioning();

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');
this.createPopupEle(ele, [].slice.call(dom_2.selectAll('.' + CLS_ITEMS + ' .' + CLS_ITEM, ele)));
this.element.querySelector('.' + CLS_TBARNAV).setAttribute('tabIndex', '0');
}
if (this.tbarAlign) {
innerItems.classList.add(CLASS_TBARPOS);
this.add(innerItems, CLS_TBARPOS);
this.itemPositioning();

@@ -428,57 +466,10 @@ }

};
Toolbar.prototype.checkPriority = function (ele, inEle, eleWidth, pre) {
var len = inEle.length;
var eleWid = eleWidth;
var sepCheck = 0;
var itemCount = 0;
var itemPopCount = 0;
for (var i = len - 1; i >= 0; i--) {
var mrgn = parseFloat((window.getComputedStyle(inEle[i])).marginRight);
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(CLASS_SEPARATOR)) {
dom_1.setStyleAttribute(sepEle, { display: 'none' });
}
}
sepCheck++;
itemCount = 0;
itemPopCount = 0;
}
else {
itemCount++;
}
if (inEle[i].classList.contains(CLASS_TBAROVERFLOW) && pre) {
eleWidth -= (inEle[i].offsetWidth + (mrgn));
}
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 + (mrgn));
}
}
}
if (pre) {
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('.' + CLASS_TBARNAV);
Toolbar.prototype.createPopupEle = function (ele, innerEle) {
var innerNav = ele.querySelector('.' + CLS_TBARNAV);
if (!innerNav) {
this.createPopupIcon(ele);
}
innerNav = ele.querySelector('.' + CLASS_TBARNAV);
innerNav = ele.querySelector('.' + CLS_TBARNAV);
var eleWidth = (ele.offsetWidth - (innerNav.offsetWidth));
if (this.enableRtl) {
this.element.classList.remove('e-rtl');
}
this.element.classList.remove('e-rtl');
this.checkPriority(ele, innerEle, eleWidth, true);

@@ -490,38 +481,12 @@ if (this.enableRtl) {

};
Toolbar.prototype.createPopupIcon = function (element) {
var id = element.id.concat('_nav');
var className = 'e-' + element.id.concat('_nav ' + CLASS_POPUPNAV);
var nav = dom_2.createElement('div', { id: id, className: className });
if (ej2_base_1.Browser.info.name === 'msie') {
nav.classList.add('e-ie-align');
}
var navItem = dom_2.createElement('div', { className: CLASS_POPUPDOWN + ' e-icons' });
nav.appendChild(navItem);
nav.setAttribute('tabindex', '0');
element.insertBefore(nav, element.firstChild);
};
Toolbar.prototype.createPopup = function () {
var _this = this;
var element = this.element;
var eleHeight;
var eleItem;
eleItem = element.querySelector('.' + CLASS_ITEM + ':not(.' + CLASS_SEPARATOR + ' ):not(.' + CLASS_POPUP + ' )');
eleHeight = element.style.height === 'auto' ? null : eleItem.offsetHeight;
var ele;
var nodes;
var popupPri = [];
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: CLASS_POPUPCLASS });
}
var poppedEle = this.sliceFn.call(dom_2.selectAll('.' + CLASS_POPUP, element.querySelector('.' + CLASS_ITEMS)));
nodes = dom_2.selectAll('.' + CLASS_TBAROVERFLOW, ele);
Toolbar.prototype.pushingPoppedEle = function (tbarObj, popupPri, ele, eleHeight) {
var element = tbarObj.element;
var nodes = dom_2.selectAll('.' + CLS_TBAROVERFLOW, ele);
var nodeIndex = 0;
var poppedEle = [].slice.call(dom_2.selectAll('.' + CLS_POPUP, element.querySelector('.' + CLS_ITEMS)));
var nodePri = 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) {
nodes = dom_2.selectAll('.' + CLS_TBAROVERFLOW, ele);
if (el.classList.contains(CLS_TBAROVERFLOW) && nodes.length > 0) {
if (tbarObj.tbResize && nodes.length > index) {
ele.insertBefore(el, nodes[index]);

@@ -535,14 +500,14 @@ ++nodePri;

}
else if (el.classList.contains(CLASS_TBAROVERFLOW)) {
else if (el.classList.contains(CLS_TBAROVERFLOW)) {
ele.insertBefore(el, ele.firstChild);
++nodePri;
}
else if (_this.tbResize && el.classList.contains(CLASS_POPOVERFLOW) && ele.children.length > 0 && nodes.length === 0) {
else if (tbarObj.tbResize && el.classList.contains(CLS_POPOVERFLOW) && ele.children.length > 0 && nodes.length === 0) {
ele.insertBefore(el, ele.firstChild);
++nodePri;
}
else if (el.classList.contains(CLASS_POPOVERFLOW)) {
else if (el.classList.contains(CLS_POPOVERFLOW)) {
popupPri.push(el);
}
else if (_this.tbResize) {
else if (tbarObj.tbResize) {
ele.insertBefore(el, ele.childNodes[nodeIndex + nodePri]);

@@ -554,3 +519,3 @@ ++nodeIndex;

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

@@ -560,7 +525,7 @@ popupPri.forEach(function (el) {

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

@@ -571,10 +536,26 @@ else {

}
this.initPopup(element, ele);
};
Toolbar.prototype.initPopup = function (element, ele) {
if (!this.popupObj) {
Toolbar.prototype.createPopup = function () {
var element = this.element;
var eleHeight;
var eleItem;
eleItem = element.querySelector('.' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + ' ):not(.' + CLS_POPUP + ' )');
eleHeight = (element.style.height === 'auto' || element.style.height === '') ? null : eleItem.offsetHeight;
var ele;
var popupPri = [];
if (element.querySelector('#' + element.id + '_popup.' + CLS_POPUPCLASS)) {
ele = element.querySelector('#' + element.id + '_popup.' + CLS_POPUPCLASS);
}
else {
ele = dom_2.createElement('div', { id: element.id + '_popup', className: CLS_POPUPCLASS });
}
this.pushingPoppedEle(this, popupPri, ele, eleHeight);
this.popupInit(element, ele);
};
Toolbar.prototype.popupInit = function (element, ele) {
if (!this.popObj) {
element.appendChild(ele);
dom_1.setStyleAttribute(this.element, { overflow: '' });
var popup = new ej2_popups_1.Popup(ele, {
relateTo: element,
dom_2.setStyleAttribute(this.element, { overflow: '' });
var popup = new ej2_popups_1.Popup(null, {
relateTo: this.element,
offsetY: (element.offsetHeight),

@@ -586,2 +567,3 @@ enableRtl: this.enableRtl,

});
popup.appendTo(ele);
ej2_base_1.EventHandler.add(document, 'scroll', this.docEvent.bind(this));

@@ -591,25 +573,17 @@ ej2_base_1.EventHandler.add(document, 'click ', this.docEvent.bind(this));

popup.hide();
this.popupObj = popup;
this.popObj = popup;
this.element.setAttribute('aria-haspopup', 'true');
}
else {
var popupEle = this.popupObj.element;
dom_1.setStyleAttribute(popupEle, { maxHeight: '', display: 'block' });
dom_1.setStyleAttribute(popupEle, { maxHeight: popupEle.offsetHeight + 'px', display: '' });
var popupEle = this.popObj.element;
dom_2.setStyleAttribute(popupEle, { maxHeight: '', display: 'block' });
dom_2.setStyleAttribute(popupEle, { maxHeight: popupEle.offsetHeight + 'px', display: '' });
}
};
Toolbar.prototype.docEvent = function (e) {
var popEle = dom_1.closest(e.target, '.e-popup');
if (this.popupObj && dom_1.isVisible(this.popupObj.element) && !popEle) {
this.popupObj.hide({ name: 'SlideUp', duration: 100 });
}
};
Toolbar.prototype.popupOpen = function (e) {
var popObj = this.popupObj;
var popupEle = this.popupObj.element;
var toolEle = this.element;
var popupNav = toolEle.querySelector('.' + CLASS_TBARNAV);
dom_1.setStyleAttribute(popObj.element, { height: 'auto', maxHeight: '' });
popObj.element.style.height = 'auto';
popObj.element.style.maxHeight = '';
var popObj = this.popObj;
var popupEle = this.popObj.element;
var toolEle = this.popObj.element.parentElement;
var popupNav = toolEle.querySelector('.' + CLS_TBARNAV);
dom_2.setStyleAttribute(popObj.element, { height: 'auto', maxHeight: '' });
popObj.element.style.maxHeight = popObj.element.clientHeight + 'px';

@@ -619,4 +593,4 @@ var popupElePos = popupEle.offsetTop + popupEle.offsetHeight + position_1.calculatePosition(toolEle).top;

var popIcon = popupNav.firstElementChild;
popupNav.classList.add(CLASS_TBARNAVACT);
dom_2.classList(popIcon, [CLASS_POPUPICON], [CLASS_POPUPDOWN]);
popupNav.classList.add(CLS_TBARNAVACT);
dom_1.classList(popIcon, [CLS_POPUPICON], [CLS_POPUPDOWN]);
}

@@ -626,3 +600,3 @@ if ((window.innerHeight + window.scrollY) < popupElePos) {

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

@@ -632,130 +606,118 @@ };

var element = this.element.parentElement;
var popupNav = element.querySelector('.' + CLASS_TBARNAV);
var popupNav = element.querySelector('.' + CLS_TBARNAV);
if (popupNav) {
var popIcon = popupNav.firstElementChild;
popupNav.classList.remove(CLASS_TBARNAVACT);
dom_2.classList(popIcon, [CLASS_POPUPDOWN], [CLASS_POPUPICON]);
popupNav.classList.remove(CLS_TBARNAVACT);
dom_1.classList(popIcon, [CLS_POPUPDOWN], [CLS_POPUPICON]);
}
};
Toolbar.prototype.removePositioning = function () {
var item = this.element.querySelector('.' + CLASS_ITEMS);
if (util_1.isNullOrUndefined(item) || !item.classList.contains(CLASS_TBARPOS)) {
return;
Toolbar.prototype.checkPriority = function (ele, inEle, eleWidth, pre) {
var len = inEle.length;
var eleWid = eleWidth;
var sepCheck = 0;
var itemCount = 0;
var itemPopCount = 0;
for (var i = len - 1; i >= 0; i--) {
var mrgn = parseFloat((window.getComputedStyle(inEle[i])).marginRight);
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(CLS_SEPARATOR)) {
if (sepCheck > 0 && itemCount === itemPopCount) {
var sepEle = inEle[i + itemCount + (sepCheck - 1)];
if (sepEle.classList.contains(CLS_SEPARATOR)) {
dom_2.setStyleAttribute(sepEle, { display: 'none' });
}
}
sepCheck++;
itemCount = 0;
itemPopCount = 0;
}
else {
itemCount++;
}
if (inEle[i].classList.contains(CLS_TBAROVERFLOW) && pre) {
eleWidth -= (inEle[i].offsetWidth + (mrgn));
}
else if (!inEle[i].classList.contains(CLS_SEPARATOR)) {
inEle[i].classList.add(CLS_POPUP);
dom_2.setStyleAttribute(inEle[i], { display: 'none' });
itemPopCount++;
}
else {
eleWidth -= (inEle[i].offsetWidth + (mrgn));
}
}
}
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;
if (pre) {
var popedEle = dom_2.selectAll('.' + CLS_ITEM + ':not(.' + CLS_POPUP + ')', this.element);
this.checkPriority(ele, popedEle, eleWid, false);
}
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);
Toolbar.prototype.createPopupIcon = function (element) {
var id = element.id.concat('_nav');
var className = 'e-' + element.id.concat('_nav ' + CLS_POPUPNAV);
var nav = dom_2.createElement('div', { id: id, className: className });
if (ej2_base_3.Browser.info.name === 'msie' || ej2_base_3.Browser.info.name === 'edge') {
nav.classList.add('e-ie-align');
}
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);
}
var navItem = dom_2.createElement('div', { className: CLS_POPUPDOWN + ' e-icons' });
nav.appendChild(navItem);
nav.setAttribute('tabindex', '0');
element.insertBefore(nav, element.firstChild);
};
Toolbar.prototype.renderItems = function () {
var _this = this;
var ele = this.element;
var itemEleDom;
var innerItem;
var innerPos;
var items = this.items;
if (ele && ele.children.length > 0) {
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(CLASS_ITEMS);
this.tbarEle = [];
var innerEle = this.sliceFn.call(this.trgtEle.children);
innerEle.forEach(function (ele) {
if (ele.tagName === 'DIV') {
_this.tbarEle.push(ele);
ele.classList.add(CLASS_ITEM);
Toolbar.prototype.tbarPriRef = function (inEle, indx, sepPri, el, des, elWid, wid) {
var popEle = this.popObj.element;
var query = '.' + CLS_ITEM + ':not(.' + CLS_SEPARATOR + '):not(.' + CLS_TBAROVERFLOW + ')';
var priEleCnt = dom_2.selectAll('.' + CLS_POPUP + ':not(.' + CLS_TBAROVERFLOW + ')', popEle).length;
if (dom_2.selectAll(query, inEle).length === 0) {
var eleSep = inEle.children[indx - (indx - sepPri) - 1];
if (!util_1.isNullOrUndefined(eleSep) && eleSep.classList.contains(CLS_SEPARATOR) && !dom_1.isVisible(eleSep)) {
var sepDisplay = 'none';
eleSep.style.display = 'inherit';
var eleSepWidth = eleSep.offsetWidth + (parseFloat(window.getComputedStyle(eleSep).marginRight) * 2);
var prevSep = eleSep.previousElementSibling;
if ((elWid + eleSepWidth) < wid || des) {
inEle.insertBefore(el, inEle.children[indx - (indx - sepPri)]);
if (!util_1.isNullOrUndefined(prevSep)) {
prevSep.style.display = '';
}
}
});
}
else if (ele && items.length > 0) {
if (!itemEleDom) {
itemEleDom = dom_2.createElement('div', { className: CLASS_ITEMS });
}
for (var i = 0; i < items.length; i++) {
innerItem = this.renderSubComponent(items[i]);
this.tbarEle.push(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);
if (prevSep.classList.contains(CLS_SEPARATOR)) {
prevSep.style.display = sepDisplay;
}
}
eleSep.style.display = '';
}
ele.appendChild(itemEleDom);
else {
inEle.insertBefore(el, inEle.children[indx - (indx - sepPri)]);
}
}
else {
inEle.insertBefore(el, inEle.children[indx - priEleCnt]);
}
};
Toolbar.prototype.setAttr = function (attr, element) {
var key = Object.keys(attr)[0];
switch (key) {
case 'class':
element.classList.add(attr[key]);
break;
case 'style':
var value = JSON.parse('\{"' + attr[key].replace(':', '\":\"') + '\"}');
dom_1.setStyleAttribute(element, value);
break;
default:
element.setAttribute(key, attr[key]);
break;
Toolbar.prototype.popupRefresh = function (popupEle, destroy) {
var ele = this.element;
var popNav = ele.querySelector('.' + CLS_TBARNAV);
var innerEle = ele.querySelector('.' + CLS_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) {
dom_1.detach(popNav);
this.popObj.destroy();
dom_1.detach(this.popObj.element);
this.popObj = null;
ele.setAttribute('aria-haspopup', 'false');
ele.classList.remove('e-toolpop');
}
};

@@ -766,13 +728,13 @@ Toolbar.prototype.popupEleRefresh = function (width, popupEle, destroy) {

var index;
var innerEle = this.element.querySelector('.' + CLASS_ITEMS);
var innerEle = this.element.querySelector('.' + CLS_ITEMS);
var _loop_1 = function (el) {
el.style.position = 'absolute';
var elWidth = el.offsetWidth;
var btnText = el.querySelector('.' + CLASS_TBARBTNTEXT);
if (el.classList.contains('e-tbtn-align') || el.classList.contains(CLASS_TBARTEXT)) {
var btnText = el.querySelector('.' + CLS_TBARBTNTEXT);
if (el.classList.contains('e-tbtn-align') || el.classList.contains(CLS_TBARTEXT)) {
var btn = el.children[0];
if (!util_1.isNullOrUndefined(btnText) && el.classList.contains(CLASS_TBARTEXT)) {
if (!util_1.isNullOrUndefined(btnText) && el.classList.contains(CLS_TBARTEXT)) {
btnText.style.display = 'none';
}
else if (!util_1.isNullOrUndefined(btnText) && el.classList.contains(CLASS_POPUPTEXT)) {
else if (!util_1.isNullOrUndefined(btnText) && el.classList.contains(CLS_POPUPTEXT)) {
btnText.style.display = 'block';

@@ -792,4 +754,4 @@ }

if (elWidth < width || destroy) {
if (!el.classList.contains(CLASS_POPOVERFLOW)) {
el.classList.remove(CLASS_POPUP);
if (!el.classList.contains(CLS_POPOVERFLOW)) {
el.classList.remove(CLS_POPUP);
}

@@ -799,10 +761,10 @@ index = this_1.tbarEle.indexOf(el);

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);
index = this_1.tbarAlgEle[(pos + 's')].indexOf(el);
eleSplice = this_1.tbarAlgEle[(pos + 's')];
innerEle = this_1.element.querySelector('.' + CLS_ITEMS + ' .' + 'e-toolbar-' + pos);
}
var sepBeforePri_1 = 0;
eleSplice.slice(0, index).forEach(function (el) {
if (el.classList.contains(CLASS_TBAROVERFLOW) || el.classList.contains(CLASS_SEPARATOR)) {
if (el.classList.contains(CLASS_SEPARATOR)) {
if (el.classList.contains(CLS_TBAROVERFLOW) || el.classList.contains(CLS_SEPARATOR)) {
if (el.classList.contains(CLS_SEPARATOR)) {
el.style.display = '';

@@ -814,33 +776,4 @@ width -= el.offsetWidth;

});
if (el.classList.contains(CLASS_TBAROVERFLOW)) {
var popEle = this_1.popupObj.element;
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(CLASS_SEPARATOR) && !dom_1.isVisible(eleSep)) {
var sepDisplay = 'none';
eleSep.style.display = 'inherit';
var eleSepWidth = eleSep.offsetWidth + (parseFloat(window.getComputedStyle(eleSep).marginRight) * 2);
var prevSep = eleSep.previousElementSibling;
if ((elWidth + eleSepWidth) < width || destroy) {
innerEle.insertBefore(el, innerEle.children[index - (index - sepBeforePri_1)]);
if (!util_1.isNullOrUndefined(prevSep)) {
prevSep.style.display = '';
}
}
else {
if (prevSep.classList.contains(CLASS_SEPARATOR)) {
prevSep.style.display = sepDisplay;
}
}
eleSep.style.display = '';
}
else {
innerEle.insertBefore(el, innerEle.children[index - (index - sepBeforePri_1)]);
}
}
else {
innerEle.insertBefore(el, innerEle.children[index - priEleCnt]);
}
if (el.classList.contains(CLS_TBAROVERFLOW)) {
this_1.tbarPriRef(innerEle, index, sepBeforePri_1, el, destroy, elWidth, width);
width -= el.offsetWidth;

@@ -853,3 +786,3 @@ }

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

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

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

@@ -873,23 +806,126 @@ var state_1 = _loop_1(el);

};
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)) {
Toolbar.prototype.removePositioning = function () {
var item = this.element.querySelector('.' + CLS_ITEMS);
if (util_1.isNullOrUndefined(item) || !item.classList.contains(CLS_TBARPOS)) {
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) {
dom_1.detach(popNav);
this.popupObj.destroy();
dom_1.detach(this.popupObj.element);
this.popupObj = null;
this.element.setAttribute('aria-haspopup', 'false');
this.element.classList.remove('e-toolpop');
this.remove(item, CLS_TBARPOS);
var innerItem = [].slice.call(item.childNodes);
innerItem[1].removeAttribute('style');
innerItem[2].removeAttribute('style');
};
Toolbar.prototype.refreshPositioning = function () {
var item = this.element.querySelector('.' + CLS_ITEMS);
this.add(item, CLS_TBARPOS);
this.itemPositioning();
};
Toolbar.prototype.itemPositioning = function () {
var item = this.element.querySelector('.' + CLS_ITEMS);
if (util_1.isNullOrUndefined(item) || !item.classList.contains(CLS_TBARPOS)) {
return;
}
var popupNav = this.element.querySelector('.' + CLS_TBARNAV);
var innerItem;
if (this.scrollModule) {
innerItem = [].slice.call(item.querySelector('.' + CLS_TBARSCROLL).children);
}
else {
innerItem = [].slice.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;
var alignDiv = [];
alignDiv.push(dom_2.createElement('div', { className: CLS_TBARLEFT }));
alignDiv.push(dom_2.createElement('div', { className: CLS_TBARCENTER }));
alignDiv.push(dom_2.createElement('div', { className: CLS_TBARRIGHT }));
if (pos === 0 && item.align !== 'left') {
alignDiv.forEach(function (ele) {
itemEle.appendChild(ele);
});
this.tbarAlign = true;
this.add(itemEle, CLS_TBARPOS);
}
else if (item.align !== 'left') {
var alignEle = itemEle.childNodes;
var leftAlign_1 = alignDiv[0];
[].slice.call(alignEle).forEach(function (el) {
_this.tbarAlgEle.lefts.push(el);
leftAlign_1.appendChild(el);
});
itemEle.appendChild(leftAlign_1);
itemEle.appendChild(alignDiv[1]);
itemEle.appendChild(alignDiv[2]);
this.tbarAlign = true;
this.add(itemEle, CLS_TBARPOS);
}
};
Toolbar.prototype.ctrlTemplate = function () {
var _this = this;
this.add(this.trgtEle, CLS_ITEMS);
this.tbarEle = [];
var innerEle = [].slice.call(this.trgtEle.children);
innerEle.forEach(function (ele) {
if (ele.tagName === 'DIV') {
_this.tbarEle.push(ele);
_this.add(ele, CLS_ITEM);
}
});
};
Toolbar.prototype.renderItems = function () {
var ele = this.element;
var itemEleDom;
var innerItem;
var innerPos;
var items = this.items;
if (ele && ele.children.length > 0) {
var navEle = dom_2.selectAll('.' + CLS_TBARNAV, ele);
itemEleDom = navEle.length > 0 ? ele.children[1] : ele.children[0];
}
if (this.trgtEle != null) {
this.ctrlTemplate();
}
else if (ele && items.length > 0) {
if (!itemEleDom) {
itemEleDom = dom_2.createElement('div', { className: CLS_ITEMS });
}
for (var i = 0; i < items.length; i++) {
innerItem = this.renderSubComponent(items[i]);
if (this.tbarEle.indexOf(innerItem) === -1) {
this.tbarEle.push(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 + 's')].push(innerItem);
innerPos.appendChild(innerItem);
}
else {
itemEleDom.appendChild(innerItem);
}
}
ele.appendChild(itemEleDom);
}
};
Toolbar.prototype.setAttr = function (attr, element) {
var key = Object.keys(attr);
var keyVal;
for (var i = 0; i < key.length; i++) {
keyVal = key[i];
keyVal === 'class' ? this.add(element, attr[keyVal]) : element.setAttribute(keyVal, attr[keyVal]);
}
};
Toolbar.prototype.enableItems = function (items, isEnable) {

@@ -902,3 +938,3 @@ var elements = items;

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

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

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

@@ -914,3 +950,3 @@ };

var innerItems;
var itemsDiv = this.element.querySelector('.' + CLASS_ITEMS);
var itemsDiv = this.element.querySelector('.' + CLS_ITEMS);
var innerEle;

@@ -928,3 +964,3 @@ var itemAgn = 'left';

var item = items_1[_i];
innerItems = dom_2.selectAll('.' + CLASS_ITEM, this.element);
innerItems = dom_2.selectAll('.' + CLS_ITEM, this.element);
item.align = itemAgn;

@@ -937,9 +973,9 @@ innerEle = this.renderSubComponent(item);

if (this.scrollModule) {
ele = dom_1.closest(innerItems[0], '.' + CLASS_ITEMS + ' .' + CLASS_TBARSCROLL).children[algIndex];
ele = dom_1.closest(innerItems[0], '.' + CLS_ITEMS + ' .' + CLS_TBARSCROLL).children[algIndex];
}
else {
ele = dom_1.closest(innerItems[0], '.' + CLASS_ITEMS).children[algIndex];
ele = dom_1.closest(innerItems[0], '.' + CLS_ITEMS).children[algIndex];
}
ele.insertBefore(innerEle, ele.children[index]);
this.tbarAlgEle[item.align].splice(index, 0, innerEle);
this.tbarAlgEle[(item.align + 's')].splice(index, 0, innerEle);
this.refreshPositioning();

@@ -962,3 +998,3 @@ }

var index;
var innerItems = this.sliceFn.call(dom_2.selectAll('.' + CLASS_ITEM, this.element));
var innerItems = [].slice.call(dom_2.selectAll('.' + CLS_ITEM, this.element));
if (typeof (elements) === 'number') {

@@ -970,7 +1006,7 @@ index = parseInt(args.toString(), 10);

if (elements && elements.length > 1) {
for (var _i = 0, _a = this.sliceFn.call(elements); _i < _a.length; _i++) {
for (var _i = 0, _a = [].slice.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);
innerItems = dom_2.selectAll('.' + CLS_ITEM, this.element);
}

@@ -990,4 +1026,4 @@ }

if (this.tbarAlign) {
var indexAgn = this.tbarAlgEle[this.items[eleIdx].align].indexOf(this.tbarEle[eleIdx]);
this.tbarAlgEle[this.items[eleIdx].align].splice(indexAgn, 1);
var indexAgn = this.tbarAlgEle[(this.items[eleIdx].align + 's')].indexOf(this.tbarEle[eleIdx]);
this.tbarAlgEle[(this.items[eleIdx].align + 's')].splice(indexAgn, 1);
}

@@ -1010,3 +1046,3 @@ dom_1.detach(innerItems[index]);

}
else if (itemType === 'Input' || itemType === '2') {
else if (itemType === 'Input') {
var templateProperty = templateProp;

@@ -1018,9 +1054,40 @@ var ele = dom_2.createElement('input');

}
innerEle.classList.add(CLASS_TEMPLATE);
this.add(innerEle, CLS_TEMPLATE);
this.tbarEle.push(innerEle);
};
Toolbar.prototype.buttonRendering = function (item, innerEle) {
var dom = dom_2.createElement('button', { className: CLS_TBARBTN });
var textStr = item.text;
var iconCss;
var iconPos;
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 (textStr) {
btnTxt.innerHTML = textStr;
dom.appendChild(btnTxt);
dom.classList.add('e-tbtn-txt');
}
else {
this.add(innerEle, 'e-tbtn-align');
}
if (item.prefixIcon || item.suffixIcon) {
if ((item.prefixIcon && item.suffixIcon) || item.prefixIcon) {
iconCss = item.prefixIcon + ' e-icons';
iconPos = 'left';
}
else {
iconCss = item.suffixIcon + ' e-icons';
iconPos = 'right';
}
}
new ej2_buttons_1.Button({ iconCss: iconCss, iconPosition: iconPos }, dom);
if (item.width) {
dom_2.setStyleAttribute(dom, { 'width': util_1.formatUnit(item.width) });
}
return dom;
};
Toolbar.prototype.renderSubComponent = function (item) {
var innerEle;
var dom;
innerEle = dom_2.createElement('div', { className: CLASS_ITEM });
innerEle = dom_2.createElement('div', { className: CLS_ITEM });
if (!this.tbarEle) {

@@ -1044,28 +1111,3 @@ this.tbarEle = [];

case 'Button':
var textStr = item.text;
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 (textStr) {
btnTxt.innerHTML = textStr;
dom.appendChild(btnTxt);
}
else {
innerEle.classList.add('e-tbtn-align');
}
var btnObj = new ej2_buttons_1.Button({}, dom);
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';
}
}
btnObj.dataBind();
if (item.width) {
dom_1.setStyleAttribute(dom, { 'width': util_1.formatUnit(item.width) });
}
dom = this.buttonRendering(item, innerEle);
dom.setAttribute('tabindex', '-1');

@@ -1076,3 +1118,3 @@ innerEle.appendChild(dom);

case 'Separator':
innerEle.classList.add(CLASS_SEPARATOR);
this.add(innerEle, CLS_SEPARATOR);
break;

@@ -1084,7 +1126,7 @@ }

if (sTxt === 'Toolbar') {
innerEle.classList.add(CLASS_POPUPTEXT);
innerEle.classList.add('e-tbtn-align');
this.add(innerEle, CLS_POPUPTEXT);
this.add(innerEle, 'e-tbtn-align');
}
else if (sTxt === 'Overflow') {
innerEle.classList.add(CLASS_TBARTEXT);
this.add(innerEle, CLS_TBARTEXT);
}

@@ -1095,7 +1137,7 @@ }

if (overflow === 'Show') {
innerEle.classList.add(CLASS_TBAROVERFLOW);
this.add(innerEle, CLS_TBAROVERFLOW);
}
else if (overflow === 'Hide') {
if (!innerEle.classList.contains(CLASS_SEPARATOR)) {
innerEle.classList.add(CLASS_POPOVERFLOW);
if (!innerEle.classList.contains(CLS_SEPARATOR)) {
this.add(innerEle, CLS_POPOVERFLOW);
}

@@ -1129,6 +1171,6 @@ }

}
if (this.popupObj) {
this.popupObj.hide();
if (this.popObj) {
this.popObj.hide();
}
var checkOverflow = this.checkOverflow(ele, ele.getElementsByClassName(CLASS_ITEMS)[0]);
var checkOverflow = this.checkOverflow(ele, ele.getElementsByClassName(CLS_ITEMS)[0]);
if (checkOverflow && this.scrollModule && (this.offsetWid === ele.offsetWidth)) {

@@ -1140,7 +1182,7 @@ return;

}
if (this.popupObj) {
if (this.popObj) {
if (this.tbarAlign) {
this.removePositioning();
}
this.popupRefresh(this.popupObj.element, false);
this.popupRefresh(this.popObj.element, false);
if (this.tbarAlign) {

@@ -1154,2 +1196,3 @@ this.refreshPositioning();

Toolbar.prototype.onPropertyChanged = function (newProp, oldProp) {
var tEle = this.element;
for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {

@@ -1164,43 +1207,32 @@ var prop = _a[_i];

case 'width':
var wid = this.element.offsetWidth;
dom_1.setStyleAttribute(this.element, { 'width': util_1.formatUnit(newProp.width) });
var wid = tEle.offsetWidth;
dom_2.setStyleAttribute(tEle, { 'width': util_1.formatUnit(newProp.width) });
this.renderOverflowMode();
if (this.popupObj && wid < this.element.offsetWidth) {
this.popupRefresh(this.popupObj.element, false);
if (this.popObj && wid < tEle.offsetWidth) {
this.popupRefresh(this.popObj.element, false);
}
break;
case 'height':
dom_1.setStyleAttribute(this.element, { 'height': util_1.formatUnit(newProp.height) });
dom_2.setStyleAttribute(this.element, { 'height': util_1.formatUnit(newProp.height) });
break;
case 'overflowMode':
if (this.scrollModule) {
this.scrollModule.element.classList.remove(CLASS_RTL);
this.remove(this.scrollModule.element, CLS_RTL);
this.destroyHScroll();
}
if (this.popupObj) {
this.popupRefresh(this.popupObj.element, true);
if (this.popObj) {
this.popupRefresh(this.popObj.element, true);
}
this.renderOverflowMode();
if (this.enableRtl) {
this.element.classList.add(CLASS_RTL);
this.add(tEle, CLS_RTL);
}
break;
case 'enableRtl':
if (newProp.enableRtl) {
this.element.classList.add(CLASS_RTL);
if (!util_1.isNullOrUndefined(this.scrollModule)) {
this.scrollModule.element.classList.add(CLASS_RTL);
}
if (!util_1.isNullOrUndefined(this.popupObj)) {
this.popupObj.element.classList.add(CLASS_RTL);
}
newProp.enableRtl ? this.add(tEle, CLS_RTL) : this.remove(tEle, CLS_RTL);
if (!util_1.isNullOrUndefined(this.scrollModule)) {
newProp.enableRtl ? this.add(this.scrollModule.element, CLS_RTL) : this.remove(this.scrollModule.element, CLS_RTL);
}
else {
this.element.classList.remove(CLASS_RTL);
if (!util_1.isNullOrUndefined(this.scrollModule)) {
this.scrollModule.element.classList.remove(CLASS_RTL);
}
if (!util_1.isNullOrUndefined(this.popupObj)) {
this.popupObj.element.classList.remove(CLASS_RTL);
}
if (!util_1.isNullOrUndefined(this.popObj)) {
newProp.enableRtl ? this.add(this.popObj.element, CLS_RTL) : this.remove(this.popObj.element, CLS_RTL);
}

@@ -1207,0 +1239,0 @@ break;

README.md
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

license

Sorry, the diff of this file is not supported yet

styles/h-scroll/_all.scss

Sorry, the diff of this file is not supported yet

styles/h-scroll/_bootstrap-definition.scss

Sorry, the diff of this file is not supported yet

styles/h-scroll/_definition.scss

Sorry, the diff of this file is not supported yet

styles/h-scroll/_icons.scss

Sorry, the diff of this file is not supported yet

styles/h-scroll/_layout.scss

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/_theme.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/_all.scss

Sorry, the diff of this file is not supported yet

styles/toolbar/_bootstrap-definition.scss

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/_icons.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

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