@syncfusion/ej2-navigations 20.1.47 → 20.1.48

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.1.47
+*  version : 20.1.48
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-navigations@*",
-  "_id": "@syncfusion/ej2-navigations@19.25.1",
+  "_id": "@syncfusion/ej2-navigations@20.1.47",
   "_inBundle": false,
-  "_integrity": "sha512-GNUOII59sO5o+k2n+F9cXlOi5wne5FLhSNZLo6GVUiVx+rq9QtbgiNsNGsPhLsLsXSjl8XPnXu9GsAsF/vKmaA==",
+  "_integrity": "sha512-Miy9ZvkCao5E86FKpBLBNG6WZszmxQ9YLMqv1b8TP/psMex3S06WfpOQeE4dc5y6wAO6g4sswXhFa7lbrb2MwA==",
   "_location": "/@syncfusion/ej2-navigations",
   "_phantomChildren": {},
   "_requested": {
@@ -37,8 +37,8 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-navigations"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-navigations/-/ej2-navigations-19.25.1.tgz",
-  "_shasum": "0041c0a4ea394c306397a255416013c856c662fd",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-navigations/-/ej2-navigations-20.1.47.tgz",
+  "_shasum": "37190cb3a437899304df3a3e0ee92b9eaedc1e04",
   "_spec": "@syncfusion/ej2-navigations@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -49,10 +49,10 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.1.47",
+    "@syncfusion/ej2-base": "~20.1.48",
     "@syncfusion/ej2-buttons": "~20.1.47",
     "@syncfusion/ej2-data": "~20.1.47",
-    "@syncfusion/ej2-inputs": "~20.1.47",
+    "@syncfusion/ej2-inputs": "~20.1.48",
     "@syncfusion/ej2-lists": "~20.1.47",
     "@syncfusion/ej2-popups": "~20.1.47"
   },
@@ -159,6 +159,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "20.1.47",
+  "version": "20.1.48",
   "sideEffects": false
 }

package/src/common/h-scroll.js

@@ -210,11 +210,13 @@ var HScroll = /** @class */ (function (_super) {
     HScroll.prototype.createNavIcon = function (element) {
         var id = element.id.concat('_nav');
         var clsRight = 'e-' + element.id.concat('_nav ' + CLS_HSCROLLNAV + ' ' + CLS_HSCROLLNAVRIGHT);
-        var nav = this.createElement('div', { id: id.concat('_right'), className: clsRight });
+        var rightAttributes = { 'role': 'button', 'id': id.concat('_right'), 'aria-label': 'Scroll right' };
+        var nav = this.createElement('div', { className: clsRight, attrs: rightAttributes });
         nav.setAttribute('aria-disabled', 'false');
         var navItem = this.createElement('div', { className: CLS_NAVRIGHTARROW + ' ' + CLS_NAVARROW + ' e-icons' });
         var clsLeft = 'e-' + element.id.concat('_nav ' + CLS_HSCROLLNAV + ' ' + CLS_HSCROLLNAVLEFT);
-        var navEle = this.createElement('div', { id: id.concat('_left'), className: clsLeft + ' ' + CLS_DISABLE });
+        var leftAttributes = { 'role': 'button', 'id': id.concat('_left'), 'aria-label': 'Scroll left' };
+        var navEle = this.createElement('div', { className: clsLeft + ' ' + CLS_DISABLE, attrs: leftAttributes });
         navEle.setAttribute('aria-disabled', 'true');
         var navLeftItem = this.createElement('div', { className: CLS_NAVLEFTARROW + ' ' + CLS_NAVARROW + ' e-icons' });
         navEle.appendChild(navLeftItem);

package/src/common/menu-base.js

@@ -536,14 +536,14 @@ var MenuBase = /** @class */ (function (_super) {
         if (this.isMenuVisible()) {
             var sli = void 0;
             var item_1;
-            var wrapper = this.getWrapper();
+            var wrapper_1 = this.getWrapper();
             var beforeCloseArgs = void 0;
             var items_1;
             var popups = this.getPopups();
             var isClose = false;
-            var cnt = this.isMenu ? popups.length + 1 : wrapper.childElementCount;
+            var cnt = this.isMenu ? popups.length + 1 : wrapper_1.childElementCount;
             var ul_1 = this.isMenu && cnt !== 1 ? select('.e-ul', popups[cnt - 2])
-                : selectAll('.e-menu-parent', wrapper)[cnt - 1];
+                : selectAll('.e-menu-parent', wrapper_1)[cnt - 1];
             if (this.isMenu && ul_1.classList.contains('e-menu')) {
                 sli = this.getLIByClass(ul_1, SELECTED);
                 if (sli) {
@@ -632,6 +632,9 @@ var MenuBase = /** @class */ (function (_super) {
                         _this.navIdx.length !== 0 && closest(e.target, '.e-menu-parent.e-control')) {
                         _this.closeMenu(0, e);
                     }
+                    else if (isOpen && !_this.isMenu && selectAll('.e-menu-parent', wrapper_1)[ulIndex - 1] && e.which === 3) {
+                        _this.closeMenu(null, e);
+                    }
                     else {
                         if (isOpen && (_this.keyType === 'right' || _this.keyType === 'click')) {
                             _this.afterCloseMenu(e);
@@ -1692,8 +1695,9 @@ var MenuBase = /** @class */ (function (_super) {
     MenuBase.prototype.removeItem = function (item, navIdx, idx) {
         item.splice(idx, 1);
         var uls = this.getWrapper().children;
-        if (navIdx.length < uls.length) {
-            detach(uls[navIdx.length].children[idx]);
+        var uls_length = this.hamburgerMode ? 1 : uls.length;
+        if (navIdx.length < uls_length) {
+            detach(uls[this.hamburgerMode ? 1 : navIdx.length].children[idx]);
         }
     };
     /**

package/src/toolbar/toolbar.js

@@ -1767,11 +1767,15 @@ var Toolbar = /** @class */ (function (_super) {
         if (typeof (templateProp) === 'string' || !isComponent) {
             var templateFn = void 0;
             var val = templateProp;
+            var regEx = new RegExp(/<(?=.*? .*?\/ ?>|br|hr|input|!--|wbr)[a-z]+.*?>|<([a-z]+).*?<\/\1>/i);
             val = (typeof (templateProp) === 'string') ? templateProp.trim() : templateProp;
             try {
                 if (typeof (templateProp) === 'object' && !isNOU(templateProp.tagName)) {
                     innerEle.appendChild(templateProp);
                 }
+                else if (typeof (templateProp) === 'string' && regEx.test(val)) {
+                    innerEle.innerHTML = val;
+                }
                 else if (document.querySelectorAll(val).length) {
                     var ele = document.querySelector(val);
                     var tempStr = ele.outerHTML.trim();

package/styles/breadcrumb/_tailwind-dark-definition.scss

@@ -1,60 +1 @@
-// Size variables
-$breadcrumb-skin: 'tailwind' !default;
-$breadcrumb-last-item-font-weight: $font-weight-medium !default;
-$breadcrumb-font-size: $text-sm !default;
-$breadcrumb-bigger-font-size: $text-base !default;
-$breadcrumb-icon-font-size: $text-sm !default;
-$breadcrumb-icon-bigger-font-size: $text-base !default;
-$breadcrumb-padding: 3px 12px !default;
-$breadcrumb-padding-left: 0 !default;
-$breadcrumb-padding-right: 0 !default;
-$breadcrumb-bigger-padding: 2px 16px !default;
-$breadcrumb-separator-padding: 3px 4px !default;
-$breadcrumb-separator-bigger-padding: 2px 4px !default;
-$breadcrumb-icon-color: $cool-gray-500 !default;
-$breadcrumb-icon-right-padding: 8px !default;
-$breadcrumb-icon-bigger-right-padding: 12px !default;
-$breadcrumb-collapsed-icon-padding: 4px 8px !default;
-$breadcrumb-collapsed-icon-bigger-padding: 3px 8px !default;
-$breadcrumb-collapsed-icon-font-size: 16px !default;
-$breadcrumb-collapsed-icon-bigger-font-size: 18px !default;
-$breadcrumb-sibling-separator-padding: 0 !default;
-$breadcrumb-sibling-separator-margin-left: -4px !default;
-$breadcrumb-icon-item-padding: 2px 0 !default;
-$breadcrumb-item-focus-padding: 2px 11px !default;
-$breadcrumb-item-focus-bigger-padding: 1px 15px !default;
-$breadcrumb-icon-only-item-padding: 3px 5px !default;
-$breadcrumb-icon-only-item-focus-padding: 2px 4px !default;
-$breadcrumb-icon-only-item-bigger-padding: 3px 5px !default;
-$breadcrumb-icon-only-item-focus-bigger-padding: 2px 4px !default;
-$breadcrumb-scroll-mode-lineheight: 26px !default;
-$breadcrumb-popup-item-padding: 0 12px !default;
-$breadcrumb-popup-border-radius: 4px !default;
-$breadcrumb-popup-item-height: 32px !default;
-$cmenu-li-hover-outline-offset: 0 !default;
-$breadcrumb-popup-item-bigger-height: 36px !default;
-
-// Color variables
-$breadcrumb-item-color: $content-text-color-alt2 !default;
-$breadcrumb-separator-color: $icon-color !default;
-$breadcrumb-item-hover-color: $content-text-color-alt1 !default;
-$breadcrumb-item-focus-color: $content-text-color-alt1 !default;
-$breadcrumb-item-active-color: $content-text-color !default;
-$breadcrumb-item-hover-bgcolor: $transparent !default;
-$breadcrumb-item-active-bgcolor: $transparent !default;
-$breadcrumb-item-focus-bgcolor: $transparent !default;
-$breadcrumb-last-item-font-color: $content-text-color-alt2 !default;
-$breadcrumb-collapsed-icon-hover-bgcolor: $content-bg-color-alt2 !default;
-$breadcrumb-collapsed-icon-active-bgcolor: $content-bg-color-alt3 !default;
-$breadcrumb-collapsed-icon-focus-bgcolor: $content-bg-color-alt2 !default;
-$breadcrumb-collapsed-icon-color: $icon-color !default;
-$breadcrumb-collapsed-icon-hover-color: $content-text-color-alt2 !default;
-$breadcrumb-disabled-item-color: $content-text-color-disabled !default;
-$breadcrumb-item-focus-border: 1px solid $content-text-color-alt1 !default;
-$breadcrumb-popup-item-color: $cool-gray-100 !default;
-$breadcrumb-popup-border: 1px solid $border-light !default;
-$breadcrumb-popup-bgcolor: $flyout-bg-color !default;
-$breadcrumb-popup-box-shadow: $shadow-lg !default;
-$breadcrumb-popup-item-hover-bgcolor: $content-bg-color-focus !default;
-$breadcrumb-popup-item-hover-color: $content-text-color-focus !default;
-$breadcrumb-popup-item-hover-outline: 0 solid $border-light !default;
+@import './tailwind-definition.scss';

package/styles/breadcrumb/_tailwind-definition.scss

@@ -47,11 +47,11 @@ $breadcrumb-last-item-font-color: $content-text-color-alt2 !default;
 $breadcrumb-collapsed-icon-hover-bgcolor: $content-bg-color-alt2 !default;
 $breadcrumb-collapsed-icon-active-bgcolor: $content-bg-color-alt3 !default;
 $breadcrumb-collapsed-icon-focus-bgcolor: $content-bg-color-alt2 !default;
-$breadcrumb-collapsed-icon-color: $black !default;
-$breadcrumb-collapsed-icon-hover-color: $black !default;
+$breadcrumb-collapsed-icon-color: $icon-color !default;
+$breadcrumb-collapsed-icon-hover-color: $icon-color-hover !default;
 $breadcrumb-disabled-item-color: $content-text-color-disabled !default;
 $breadcrumb-item-focus-border: 1px solid $content-text-color-alt1 !default;
-$breadcrumb-popup-item-color: $content-text-color-alt2 !default;
+$breadcrumb-popup-item-color: $content-text-color !default;
 $breadcrumb-popup-border: 1px solid $border-light !default;
 $breadcrumb-popup-bgcolor: $flyout-bg-color !default;
 $breadcrumb-popup-box-shadow: $shadow-lg !default;

package/styles/breadcrumb/tailwind-dark.css

@@ -407,12 +407,12 @@
 
 .e-breadcrumb .e-breadcrumb-item.e-icon-item:hover {
   background-color: #374151;
-  color: #9ca3af;
+  color: #f3f4f6;
 }
 
 .e-breadcrumb .e-breadcrumb-item.e-icon-item:active {
   background-color: #4b5563;
-  color: #9ca3af;
+  color: #f3f4f6;
 }
 
 .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text:focus {
@@ -429,7 +429,7 @@
 }
 
 .e-breadcrumb .e-breadcrumb-separator {
-  color: #d1d5db;
+  color: #9ca3af;
 }
 
 .e-breadcrumb .e-breadcrumb-collapsed,
@@ -440,19 +440,19 @@
 .e-breadcrumb .e-breadcrumb-collapsed:hover,
 .e-breadcrumb .e-breadcrumb-menu:hover {
   background-color: #374151;
-  color: #9ca3af;
+  color: #f3f4f6;
 }
 
 .e-breadcrumb .e-breadcrumb-collapsed:active,
 .e-breadcrumb .e-breadcrumb-menu:active {
   background-color: #4b5563;
-  color: #9ca3af;
+  color: #f3f4f6;
 }
 
 .e-breadcrumb .e-breadcrumb-collapsed:focus,
 .e-breadcrumb .e-breadcrumb-menu:focus {
   background-color: #374151;
-  color: #9ca3af;
+  color: #f3f4f6;
 }
 
 .e-breadcrumb.e-disabled .e-breadcrumb-item .e-breadcrumb-text,
@@ -472,7 +472,7 @@
 }
 
 .e-breadcrumb-popup .e-breadcrumb-text {
-  color: #f3f4f6;
+  color: #fff;
 }
 
 .e-breadcrumb-popup .e-breadcrumb-text:hover {

package/styles/breadcrumb/tailwind.css

@@ -407,12 +407,12 @@
 
 .e-breadcrumb .e-breadcrumb-item.e-icon-item:hover {
   background-color: #f3f4f6;
-  color: #000;
+  color: #374151;
 }
 
 .e-breadcrumb .e-breadcrumb-item.e-icon-item:active {
   background-color: #e5e7eb;
-  color: #000;
+  color: #374151;
 }
 
 .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text:focus {
@@ -434,25 +434,25 @@
 
 .e-breadcrumb .e-breadcrumb-collapsed,
 .e-breadcrumb .e-breadcrumb-menu {
-  color: #000;
+  color: #6b7280;
 }
 
 .e-breadcrumb .e-breadcrumb-collapsed:hover,
 .e-breadcrumb .e-breadcrumb-menu:hover {
   background-color: #f3f4f6;
-  color: #000;
+  color: #374151;
 }
 
 .e-breadcrumb .e-breadcrumb-collapsed:active,
 .e-breadcrumb .e-breadcrumb-menu:active {
   background-color: #e5e7eb;
-  color: #000;
+  color: #374151;
 }
 
 .e-breadcrumb .e-breadcrumb-collapsed:focus,
 .e-breadcrumb .e-breadcrumb-menu:focus {
   background-color: #f3f4f6;
-  color: #000;
+  color: #374151;
 }
 
 .e-breadcrumb.e-disabled .e-breadcrumb-item .e-breadcrumb-text,
@@ -472,7 +472,7 @@
 }
 
 .e-breadcrumb-popup .e-breadcrumb-text {
-  color: #6b7280;
+  color: #111827;
 }
 
 .e-breadcrumb-popup .e-breadcrumb-text:hover {

package/styles/tailwind-dark.css

@@ -10039,12 +10039,12 @@ ejs-sidebar {
 
 .e-breadcrumb .e-breadcrumb-item.e-icon-item:hover {
   background-color: #374151;
-  color: #9ca3af;
+  color: #f3f4f6;
 }
 
 .e-breadcrumb .e-breadcrumb-item.e-icon-item:active {
   background-color: #4b5563;
-  color: #9ca3af;
+  color: #f3f4f6;
 }
 
 .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text:focus {
@@ -10061,7 +10061,7 @@ ejs-sidebar {
 }
 
 .e-breadcrumb .e-breadcrumb-separator {
-  color: #d1d5db;
+  color: #9ca3af;
 }
 
 .e-breadcrumb .e-breadcrumb-collapsed,
@@ -10072,19 +10072,19 @@ ejs-sidebar {
 .e-breadcrumb .e-breadcrumb-collapsed:hover,
 .e-breadcrumb .e-breadcrumb-menu:hover {
   background-color: #374151;
-  color: #9ca3af;
+  color: #f3f4f6;
 }
 
 .e-breadcrumb .e-breadcrumb-collapsed:active,
 .e-breadcrumb .e-breadcrumb-menu:active {
   background-color: #4b5563;
-  color: #9ca3af;
+  color: #f3f4f6;
 }
 
 .e-breadcrumb .e-breadcrumb-collapsed:focus,
 .e-breadcrumb .e-breadcrumb-menu:focus {
   background-color: #374151;
-  color: #9ca3af;
+  color: #f3f4f6;
 }
 
 .e-breadcrumb.e-disabled .e-breadcrumb-item .e-breadcrumb-text,
@@ -10104,7 +10104,7 @@ ejs-sidebar {
 }
 
 .e-breadcrumb-popup .e-breadcrumb-text {
-  color: #f3f4f6;
+  color: #fff;
 }
 
 .e-breadcrumb-popup .e-breadcrumb-text:hover {

package/styles/tailwind.css

@@ -10039,12 +10039,12 @@ ejs-sidebar {
 
 .e-breadcrumb .e-breadcrumb-item.e-icon-item:hover {
   background-color: #f3f4f6;
-  color: #000;
+  color: #374151;
 }
 
 .e-breadcrumb .e-breadcrumb-item.e-icon-item:active {
   background-color: #e5e7eb;
-  color: #000;
+  color: #374151;
 }
 
 .e-breadcrumb .e-breadcrumb-item .e-breadcrumb-text:focus {
@@ -10066,25 +10066,25 @@ ejs-sidebar {
 
 .e-breadcrumb .e-breadcrumb-collapsed,
 .e-breadcrumb .e-breadcrumb-menu {
-  color: #000;
+  color: #6b7280;
 }
 
 .e-breadcrumb .e-breadcrumb-collapsed:hover,
 .e-breadcrumb .e-breadcrumb-menu:hover {
   background-color: #f3f4f6;
-  color: #000;
+  color: #374151;
 }
 
 .e-breadcrumb .e-breadcrumb-collapsed:active,
 .e-breadcrumb .e-breadcrumb-menu:active {
   background-color: #e5e7eb;
-  color: #000;
+  color: #374151;
 }
 
 .e-breadcrumb .e-breadcrumb-collapsed:focus,
 .e-breadcrumb .e-breadcrumb-menu:focus {
   background-color: #f3f4f6;
-  color: #000;
+  color: #374151;
 }
 
 .e-breadcrumb.e-disabled .e-breadcrumb-item .e-breadcrumb-text,
@@ -10104,7 +10104,7 @@ ejs-sidebar {
 }
 
 .e-breadcrumb-popup .e-breadcrumb-text {
-  color: #6b7280;
+  color: #111827;
 }
 
 .e-breadcrumb-popup .e-breadcrumb-text:hover {