@syncfusion/ej2-navigations 24.2.8 → 25.1.37

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 24.2.8
+*  version : 25.1.37
 *  Copyright Syncfusion Inc. 2001 - 2023. 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@24.2.4",
+  "_id": "@syncfusion/ej2-navigations@25.1.35",
   "_inBundle": false,
-  "_integrity": "sha512-yGv+M8TSZfo5giPl+68COLjC1TNTMPhdxZth5ZAJ/qfjUlX1X6j4Luammcjo8MN1QszAJ9K0ewWFbelekbzHRg==",
+  "_integrity": "sha512-fR5/03VzC+9IKq8D5/KeKt9MdqSZualOAS1f7dJZdLkVxxqaLq5Ce9tLAdXqtP58MqSk3Atk6AespHptGgauYA==",
   "_location": "/@syncfusion/ej2-navigations",
   "_phantomChildren": {},
   "_requested": {
@@ -39,10 +39,10 @@
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-navigations"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-navigations/-/ej2-navigations-24.2.4.tgz",
-  "_shasum": "9382a04536eca9b09930db9686c86dcad7b09848",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-navigations/-/ej2-navigations-25.1.35.tgz",
+  "_shasum": "043a683ce25441881b94bb60054cbd3a98954a66",
   "_spec": "@syncfusion/ej2-navigations@*",
-  "_where": "/jenkins/workspace/elease-automation_release_24.1.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_25.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
@@ -51,12 +51,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~24.2.7",
-    "@syncfusion/ej2-buttons": "~24.2.7",
-    "@syncfusion/ej2-data": "~24.2.3",
-    "@syncfusion/ej2-inputs": "~24.2.7",
-    "@syncfusion/ej2-lists": "~24.2.8",
-    "@syncfusion/ej2-popups": "~24.2.8"
+    "@syncfusion/ej2-base": "~25.1.35",
+    "@syncfusion/ej2-buttons": "~25.1.35",
+    "@syncfusion/ej2-data": "~25.1.35",
+    "@syncfusion/ej2-inputs": "~25.1.37",
+    "@syncfusion/ej2-lists": "~25.1.35",
+    "@syncfusion/ej2-popups": "~25.1.35"
   },
   "deprecated": false,
   "description": "A package of Essential JS 2 navigation components such as Tree-view, Tab, Toolbar, Context-menu, and Accordion which is used to navigate from one page to another",
@@ -161,6 +161,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "24.2.8",
+  "version": "25.1.37",
   "sideEffects": false
 }

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

@@ -232,9 +232,10 @@ export interface AccordionModel extends ComponentModel{
     expandMode?: ExpandMode;
 
     /**
-     * Defines whether to allow the cross-scripting site or not.
+     * Specifies whether to enable the rendering of untrusted HTML values in the Accordion component.
+     * When this property is enabled, the component will sanitize any suspected untrusted strings and scripts before rendering them.
      *
-     * @default false
+     * @default true
      */
     enableHtmlSanitizer?: boolean;
 

package/src/accordion/accordion.d.ts

@@ -274,9 +274,10 @@ export declare class Accordion extends Component<HTMLElement> implements INotify
      */
     expandMode: ExpandMode;
     /**
-     * Defines whether to allow the cross-scripting site or not.
+     * Specifies whether to enable the rendering of untrusted HTML values in the Accordion component.
+     * When this property is enabled, the component will sanitize any suspected untrusted strings and scripts before rendering them.
      *
-     * @default false
+     * @default true
      */
     enableHtmlSanitizer: boolean;
     /**

package/src/accordion/accordion.js

@@ -649,7 +649,7 @@ var Accordion = /** @class */ (function (_super) {
         }
         catch (e) {
             if (typeof (value) === 'string') {
-                ele.innerHTML = SanitizeHtmlHelper.sanitize(value);
+                ele.innerHTML = this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(value) : value;
             }
             else if (value instanceof (HTMLElement)) {
                 ele.appendChild(value);
@@ -687,7 +687,7 @@ var Accordion = /** @class */ (function (_super) {
             });
         }
         else if (ele.childElementCount === 0) {
-            ele.innerHTML = SanitizeHtmlHelper.sanitize(value);
+            ele.innerHTML = this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(value) : value;
         }
         if (!isNOU(temString)) {
             if (this.templateEle.indexOf(value) === -1) {
@@ -715,11 +715,11 @@ var Accordion = /** @class */ (function (_super) {
             itemcnt.appendChild(ctn);
         }
         else {
-            if (this.enableHtmlSanitizer && typeof (this.items[parseInt(index.toString(), 10)].content)) {
-                this.items[parseInt(index.toString(), 10)].content =
-                    SanitizeHtmlHelper.sanitize(this.items[parseInt(index.toString(), 10)].content);
+            var content = this.items[parseInt(index.toString(), 10)].content;
+            if (this.enableHtmlSanitizer && typeof (content) === 'string') {
+                content = SanitizeHtmlHelper.sanitize(content);
             }
-            itemcnt.appendChild(this.fetchElement(ctn, this.items[parseInt(index.toString(), 10)].content, index));
+            itemcnt.appendChild(this.fetchElement(ctn, content, index));
         }
         return itemcnt;
     };
@@ -1375,7 +1375,7 @@ var Accordion = /** @class */ (function (_super) {
         Property('Multiple')
     ], Accordion.prototype, "expandMode", void 0);
     __decorate([
-        Property(false)
+        Property(true)
     ], Accordion.prototype, "enableHtmlSanitizer", void 0);
     __decorate([
         Complex({}, AccordionAnimationSettings)

package/src/breadcrumb/breadcrumb.js

@@ -462,8 +462,9 @@ var Breadcrumb = /** @class */ (function (_super) {
     };
     Breadcrumb.prototype.beforeItemRenderChanges = function (prevItem, currItem, elem, isRightIcon) {
         var wrapElem = elem.querySelector('.e-anchor-wrap');
-        if (wrapElem) {
+        if (wrapElem && wrapElem.querySelector('.e-home')) {
             wrapElem.parentElement.setAttribute('aria-label', 'home');
+            wrapElem.parentElement.setAttribute('role', 'link');
         }
         if (currItem.text !== prevItem.text) {
             wrapElem.childNodes.forEach(function (child) {

package/src/common/menu-base-model.d.ts

@@ -266,9 +266,10 @@ export interface MenuBaseModel extends ComponentModel{
     enableScrolling?: boolean;
 
     /**
-     * Defines whether to allow the cross-scripting site or not.
+     * Specifies whether to enable the rendering of untrusted HTML values in the Context Menu component.
+     * If 'enableHtmlSanitizer' set to true, the component will sanitize any suspected untrusted strings and scripts before rendering them.
      *
-     * @default false
+     * @default true
      */
     enableHtmlSanitizer?: boolean;
 

package/src/common/menu-base.d.ts

@@ -283,9 +283,10 @@ export declare abstract class MenuBase extends Component<HTMLUListElement> imple
      */
     enableScrolling: boolean;
     /**
-     * Defines whether to allow the cross-scripting site or not.
+     * Specifies whether to enable the rendering of untrusted HTML values in the Context Menu component.
+     * If 'enableHtmlSanitizer' set to true, the component will sanitize any suspected untrusted strings and scripts before rendering them.
      *
-     * @default false
+     * @default true
      */
     enableHtmlSanitizer: boolean;
     /**

package/src/common/menu-base.js

@@ -306,10 +306,10 @@ var MenuBase = /** @class */ (function (_super) {
             }
             this.targetElement = target;
             if (!this.isMenu) {
-                EventHandler.add(this.targetElement, 'mousewheel DOMMouseScroll', this.scrollHandler, this);
+                EventHandler.add(this.targetElement, 'scroll', this.scrollHandler, this);
                 for (var _i = 0, _a = getScrollableParent(this.targetElement); _i < _a.length; _i++) {
                     var parent_1 = _a[_i];
-                    EventHandler.add(parent_1, 'mousewheel DOMMouseScroll', this.scrollHandler, this);
+                    EventHandler.add(parent_1, 'scroll', this.scrollHandler, this);
                 }
             }
         }
@@ -1091,9 +1091,11 @@ var MenuBase = /** @class */ (function (_super) {
                 }
                 li.focus();
                 cul = _this.getUlByNavIdx();
-                var index = _this.isValidLI(cul.children[0], 0, _this.action);
-                cul.children[index].classList.add(FOCUSED);
-                cul.children[index].focus();
+                if (cul) {
+                    var index = _this.isValidLI(cul.children[0], 0, _this.action);
+                    cul.children[index].classList.add(FOCUSED);
+                    cul.children[index].focus();
+                }
             }
         });
     };
@@ -1415,107 +1417,103 @@ var MenuBase = /** @class */ (function (_super) {
         }
     };
     MenuBase.prototype.clickHandler = function (e) {
-        if (this.isTapHold) {
-            this.isTapHold = false;
+        this.isTapHold = this.isTapHold ? false : this.isTapHold;
+        var wrapper = this.getWrapper();
+        var trgt = e.target;
+        var cli = this.cli = this.getLI(trgt);
+        var regex = new RegExp('-ej2menu-(.*)-popup');
+        var cliWrapper = cli ? closest(cli, '.e-' + this.getModuleName() + '-wrapper') : null;
+        var isInstLI = cli && cliWrapper && (this.isMenu ? this.getIndex(cli.id, true).length > 0
+            : wrapper.firstElementChild.id === cliWrapper.firstElementChild.id);
+        if (Browser.isDevice && this.isMenu) {
+            this.removeLIStateByClass([FOCUSED], [wrapper].concat(this.getPopups()));
+            this.mouseDownHandler(e);
         }
-        else {
-            var wrapper = this.getWrapper();
-            var trgt = e.target;
-            var cli = this.cli = this.getLI(trgt);
-            var regex = new RegExp('-ej2menu-(.*)-popup');
-            var cliWrapper = cli ? closest(cli, '.e-' + this.getModuleName() + '-wrapper') : null;
-            var isInstLI = cli && cliWrapper && (this.isMenu ? this.getIndex(cli.id, true).length > 0
-                : wrapper.firstElementChild.id === cliWrapper.firstElementChild.id);
-            if (Browser.isDevice && this.isMenu) {
-                this.removeLIStateByClass([FOCUSED], [wrapper].concat(this.getPopups()));
-                this.mouseDownHandler(e);
-            }
-            if (cli && cliWrapper && this.isMenu) {
-                var cliWrapperId = cliWrapper.id ? regex.exec(cliWrapper.id)[1] : cliWrapper.querySelector('.e-menu-parent').id;
-                if (this.element.id !== cliWrapperId) {
-                    return;
-                }
-            }
-            if (isInstLI && e.type === 'click' && !cli.classList.contains(HEADER)) {
-                this.setLISelected(cli);
-                var navIdx = this.getIndex(cli.id, true);
-                var item = this.getItem(navIdx);
-                var eventArgs = { element: cli, item: item, event: e };
-                this.trigger('select', eventArgs);
-            }
-            if (isInstLI && (e.type === 'mouseover' || Browser.isDevice || this.showItemOnClick)) {
-                var ul = void 0;
-                if (cli.classList.contains(HEADER)) {
-                    ul = wrapper.children[this.navIdx.length - 1];
-                    this.toggleAnimation(ul);
-                    var sli = this.getLIByClass(ul, SELECTED);
-                    if (sli) {
-                        sli.classList.remove(SELECTED);
-                    }
-                    detach(cli.parentNode);
-                    this.navIdx.pop();
+        if (cli && cliWrapper && this.isMenu) {
+            var cliWrapperId = cliWrapper.id ? regex.exec(cliWrapper.id)[1] : cliWrapper.querySelector('.e-menu-parent').id;
+            if (this.element.id !== cliWrapperId) {
+                return;
+            }
+        }
+        if (isInstLI && e.type === 'click' && !cli.classList.contains(HEADER)) {
+            this.setLISelected(cli);
+            var navIdx = this.getIndex(cli.id, true);
+            var item = this.getItem(navIdx);
+            var eventArgs = { element: cli, item: item, event: e };
+            this.trigger('select', eventArgs);
+        }
+        if (isInstLI && (e.type === 'mouseover' || Browser.isDevice || this.showItemOnClick)) {
+            var ul = void 0;
+            if (cli.classList.contains(HEADER)) {
+                ul = wrapper.children[this.navIdx.length - 1];
+                this.toggleAnimation(ul);
+                var sli = this.getLIByClass(ul, SELECTED);
+                if (sli) {
+                    sli.classList.remove(SELECTED);
                 }
-                else {
-                    if (!cli.classList.contains(SEPARATOR)) {
-                        this.showSubMenu = true;
-                        var cul = cli.parentNode;
-                        if (isNullOrUndefined(cul)) {
-                            return;
+                detach(cli.parentNode);
+                this.navIdx.pop();
+            }
+            else {
+                if (!cli.classList.contains(SEPARATOR)) {
+                    this.showSubMenu = true;
+                    var cul = cli.parentNode;
+                    if (isNullOrUndefined(cul)) {
+                        return;
+                    }
+                    this.cliIdx = this.getIdx(cul, cli);
+                    if (this.isMenu || !Browser.isDevice) {
+                        var culIdx = this.isMenu ? Array.prototype.indexOf.call([wrapper].concat(this.getPopups()), closest(cul, '.' + 'e-' + this.getModuleName() + '-wrapper'))
+                            : this.getIdx(wrapper, cul);
+                        if (this.navIdx[culIdx] === this.cliIdx) {
+                            this.showSubMenu = false;
                         }
-                        this.cliIdx = this.getIdx(cul, cli);
-                        if (this.isMenu || !Browser.isDevice) {
-                            var culIdx = this.isMenu ? Array.prototype.indexOf.call([wrapper].concat(this.getPopups()), closest(cul, '.' + 'e-' + this.getModuleName() + '-wrapper'))
-                                : this.getIdx(wrapper, cul);
-                            if (this.navIdx[culIdx] === this.cliIdx) {
-                                this.showSubMenu = false;
+                        if (culIdx !== this.navIdx.length && (e.type !== 'mouseover' || this.showSubMenu)) {
+                            var sli = this.getLIByClass(cul, SELECTED);
+                            if (sli) {
+                                sli.classList.remove(SELECTED);
                             }
-                            if (culIdx !== this.navIdx.length && (e.type !== 'mouseover' || this.showSubMenu)) {
-                                var sli = this.getLIByClass(cul, SELECTED);
-                                if (sli) {
-                                    sli.classList.remove(SELECTED);
-                                }
-                                this.isClosed = true;
-                                this.keyType = 'click';
-                                if (this.showItemOnClick) {
-                                    this.setLISelected(cli);
-                                }
-                                this.closeMenu(culIdx + 1, e);
-                                if (this.showItemOnClick) {
-                                    this.setLISelected(cli);
-                                }
+                            this.isClosed = true;
+                            this.keyType = 'click';
+                            if (this.showItemOnClick) {
+                                this.setLISelected(cli);
+                            }
+                            this.closeMenu(culIdx + 1, e);
+                            if (this.showItemOnClick) {
+                                this.setLISelected(cli);
                             }
                         }
-                        if (!this.isClosed) {
-                            this.afterCloseMenu(e);
-                        }
-                        this.isClosed = false;
                     }
+                    if (!this.isClosed) {
+                        this.afterCloseMenu(e);
+                    }
+                    this.isClosed = false;
                 }
             }
-            else {
-                if (this.isMenu && trgt.tagName === 'DIV' && this.navIdx.length && closest(trgt, '.e-menu-vscroll')) {
-                    var popupEle = closest(trgt, '.' + POPUP);
-                    var cIdx = Array.prototype.indexOf.call(this.getPopups(), popupEle) + 1;
-                    if (cIdx < this.navIdx.length) {
-                        this.closeMenu(cIdx + 1, e);
-                        if (popupEle) {
-                            this.removeLIStateByClass([FOCUSED, SELECTED], [popupEle]);
-                        }
+        }
+        else {
+            if (this.isMenu && trgt.tagName === 'DIV' && this.navIdx.length && closest(trgt, '.e-menu-vscroll')) {
+                var popupEle = closest(trgt, '.' + POPUP);
+                var cIdx = Array.prototype.indexOf.call(this.getPopups(), popupEle) + 1;
+                if (cIdx < this.navIdx.length) {
+                    this.closeMenu(cIdx + 1, e);
+                    if (popupEle) {
+                        this.removeLIStateByClass([FOCUSED, SELECTED], [popupEle]);
                     }
                 }
-                else if (this.isMenu && this.hamburgerMode && trgt.tagName === 'SPAN'
-                    && trgt.classList.contains('e-menu-icon')) {
-                    this.menuHeaderClickHandler(e);
-                }
-                else {
-                    if (trgt.tagName !== 'UL' || (this.isMenu ? trgt.parentElement.classList.contains('e-menu-wrapper') &&
-                        !this.getIndex(trgt.querySelector('.' + ITEM).id, true).length : trgt.parentElement !== wrapper)) {
-                        if (!cli) {
-                            this.removeLIStateByClass([SELECTED], [wrapper]);
-                        }
-                        if (!cli || !cli.querySelector('.' + CARET)) {
-                            this.closeMenu(null, e);
-                        }
+            }
+            else if (this.isMenu && this.hamburgerMode && trgt.tagName === 'SPAN'
+                && trgt.classList.contains('e-menu-icon')) {
+                this.menuHeaderClickHandler(e);
+            }
+            else {
+                if (trgt.tagName !== 'UL' || (this.isMenu ? trgt.parentElement.classList.contains('e-menu-wrapper') &&
+                    !this.getIndex(trgt.querySelector('.' + ITEM).id, true).length : trgt.parentElement !== wrapper)) {
+                    if (!cli) {
+                        this.removeLIStateByClass([SELECTED], [wrapper]);
+                    }
+                    if (!cli || !cli.querySelector('.' + CARET)) {
+                        this.closeMenu(null, e);
                     }
                 }
             }
@@ -1573,9 +1571,11 @@ var MenuBase = /** @class */ (function (_super) {
         li.classList.add(SELECTED);
     };
     MenuBase.prototype.getLIByClass = function (ul, classname) {
-        for (var i = 0, len = ul.children.length; i < len; i++) {
-            if (ul.children[i].classList.contains(classname)) {
-                return ul.children[i];
+        if (ul) {
+            for (var i = 0, len = ul.children.length; i < len; i++) {
+                if (ul.children[i].classList.contains(classname)) {
+                    return ul.children[i];
+                }
             }
         }
         return null;
@@ -1867,10 +1867,10 @@ var MenuBase = /** @class */ (function (_super) {
                 }
             }
             if (!this.isMenu) {
-                EventHandler.remove(this.targetElement, 'mousewheel DOMMouseScroll', this.scrollHandler);
+                EventHandler.remove(this.targetElement, 'scroll', this.scrollHandler);
                 for (var _i = 0, _a = getScrollableParent(this.targetElement); _i < _a.length; _i++) {
                     var parent_2 = _a[_i];
-                    EventHandler.remove(parent_2, 'mousewheel DOMMouseScroll', this.scrollHandler);
+                    EventHandler.remove(parent_2, 'scroll', this.scrollHandler);
                 }
             }
         }
@@ -2346,7 +2346,7 @@ var MenuBase = /** @class */ (function (_super) {
         Property(false)
     ], MenuBase.prototype, "enableScrolling", void 0);
     __decorate([
-        Property(false)
+        Property(true)
     ], MenuBase.prototype, "enableHtmlSanitizer", void 0);
     __decorate([
         Complex({ itemId: 'id', text: 'text', parentId: 'parentId', iconCss: 'iconCss', url: 'url', separator: 'separator', children: 'items' }, FieldSettings)

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

@@ -51,9 +51,10 @@ export interface MenuModel extends MenuBaseModel{
     title?: string;
 
     /**
-     * Defines whether to allow the cross-scripting site or not.
+     * Specifies whether to enable the rendering of untrusted HTML values in the Menu component.
+     * If 'enableHtmlSanitizer' set to true, the component will sanitize any suspected untrusted strings and scripts before rendering them.
      *
-     * @default false
+     * @default true
      */
     enableHtmlSanitizer?: boolean;
 

package/src/menu/menu.d.ts

@@ -63,9 +63,10 @@ export declare class Menu extends MenuBase implements INotifyPropertyChanged {
      */
     title: string;
     /**
-     * Defines whether to allow the cross-scripting site or not.
+     * Specifies whether to enable the rendering of untrusted HTML values in the Menu component.
+     * If 'enableHtmlSanitizer' set to true, the component will sanitize any suspected untrusted strings and scripts before rendering them.
      *
-     * @default false
+     * @default true
      */
     enableHtmlSanitizer: boolean;
     /**

package/src/menu/menu.js

@@ -271,7 +271,7 @@ var Menu = /** @class */ (function (_super) {
         Property('Menu')
     ], Menu.prototype, "title", void 0);
     __decorate([
-        Property(false)
+        Property(true)
     ], Menu.prototype, "enableHtmlSanitizer", void 0);
     __decorate([
         Complex({ itemId: 'id', text: 'text', parentId: 'parentId', iconCss: 'iconCss', url: 'url', separator: 'separator', children: 'items' }, FieldSettings)

package/src/stepper/stepper.js

@@ -764,8 +764,7 @@ var Stepper = /** @class */ (function (_super) {
                         var selectedEle = this.stepperItemElements[parseInt(this.activeStep.toString(), 10)].firstChild;
                         var value = this.activeStep === 0 ? 0 : (selectedEle.offsetLeft - progressPos.offsetLeft + (selectedEle.offsetWidth / 2)) / progressPos.offsetWidth * 100;
                         if (this.element.classList.contains(RTL)) {
-                            var elementPos = this.stepperItemElements[0].firstChild;
-                            value = ((progressPos.offsetWidth - selectedEle.offsetLeft) + Math.abs((elementPos.offsetLeft + elementPos.offsetWidth) - this.stepperItemList.offsetWidth)) / progressPos.offsetWidth * 100;
+                            value = (progressPos.getBoundingClientRect().right - selectedEle.getBoundingClientRect().right + (selectedEle.offsetWidth / 2)) / progressPos.offsetWidth * 100;
                             this.progressbar.style.setProperty(PROGRESSVALUE, (value) + '%');
                         }
                         else {

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

@@ -165,15 +165,8 @@ export interface TabModel extends ComponentModel{
 
     /**
      * An array of object that is used to configure the Tab component.
-     * ```typescript
-     *   let tabObj: Tab = new Tab( {
-     *     items: [
-     *       { header: { text: 'TabItem1' }, content: 'Tab Item1 Content' },
-     *       { header: { text: 'TabItem2' }, content: 'Tab Item2 Content' }
-     *     ]
-     *   });
-     *   tabObj.appendTo('#tab');
-     * ```
+     * 
+     * {% codeBlock src='tab/items/index.md' %}{% endcodeBlock %}
      *
      * @default []
      */
@@ -203,16 +196,8 @@ export interface TabModel extends ComponentModel{
 
     /**
      * Specifies the index for activating the current Tab item.
-     * ```typescript
-     *   let tabObj: Tab = new Tab( {
-     *     selectedItem: 1,
-     *     items: [
-     *       { header: { text: 'TabItem1' }, content: 'Tab Item1 Content' },
-     *       { header: { text: 'TabItem2' }, content: 'Tab Item2 Content' }
-     *     ]
-     *   });
-     *   tabObj.appendTo('#tab');
-     * ```
+     * 
+     * {% codeBlock src='tab/selectedItem/index.md' %}{% endcodeBlock %}   
      *
      * @default 0
      */
@@ -274,9 +259,10 @@ export interface TabModel extends ComponentModel{
     enablePersistence?: boolean;
 
     /**
-     * Defines whether to allow the cross-scripting site or not.
+     * Specifies whether to enable the rendering of untrusted HTML values in the Tab component.
+     * When this property is enabled, the component will sanitize any suspected untrusted strings and scripts before rendering them.
      *
-     * @default false
+     * @default true
      */
     enableHtmlSanitizer?: boolean;
 

package/src/tab/tab.d.ts

@@ -299,15 +299,8 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
     private keyConfigs;
     /**
      * An array of object that is used to configure the Tab component.
-     * ```typescript
-     *   let tabObj: Tab = new Tab( {
-     *     items: [
-     *       { header: { text: 'TabItem1' }, content: 'Tab Item1 Content' },
-     *       { header: { text: 'TabItem2' }, content: 'Tab Item2 Content' }
-     *     ]
-     *   });
-     *   tabObj.appendTo('#tab');
-     * ```
+     *
+     * {% codeBlock src='tab/items/index.md' %}{% endcodeBlock %}
      *
      * @default []
      */
@@ -333,16 +326,8 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
     cssClass: string;
     /**
      * Specifies the index for activating the current Tab item.
-     * ```typescript
-     *   let tabObj: Tab = new Tab( {
-     *     selectedItem: 1,
-     *     items: [
-     *       { header: { text: 'TabItem1' }, content: 'Tab Item1 Content' },
-     *       { header: { text: 'TabItem2' }, content: 'Tab Item2 Content' }
-     *     ]
-     *   });
-     *   tabObj.appendTo('#tab');
-     * ```
+     *
+     * {% codeBlock src='tab/selectedItem/index.md' %}{% endcodeBlock %}
      *
      * @default 0
      */
@@ -398,9 +383,10 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
      */
     enablePersistence: boolean;
     /**
-     * Defines whether to allow the cross-scripting site or not.
+     * Specifies whether to enable the rendering of untrusted HTML values in the Tab component.
+     * When this property is enabled, the component will sanitize any suspected untrusted strings and scripts before rendering them.
      *
-     * @default false
+     * @default true
      */
     enableHtmlSanitizer: boolean;
     /**

package/src/tab/tab.js

@@ -804,10 +804,10 @@ var Tab = /** @class */ (function (_super) {
         if (typeof val === 'string') {
             val = val.trim();
             if (this.isVue) {
-                templateFn = compile(SanitizeHtmlHelper.sanitize(val));
+                templateFn = compile(this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(val) : val);
             }
             else {
-                ele.innerHTML = SanitizeHtmlHelper.sanitize(val);
+                ele.innerHTML = this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(val) : val;
             }
         }
         else {
@@ -1007,7 +1007,7 @@ var Tab = /** @class */ (function (_super) {
                         ele.removeChild(ele.firstChild);
                     }
                 }
-                if (this.isReact) {
+                if (this.isReact || this.isAngular || this.isVue) {
                     this.clearTemplate(['content']);
                 }
                 this.templateEle = [];
@@ -1181,7 +1181,7 @@ var Tab = /** @class */ (function (_super) {
         var tbPop = select('.e-popup.e-toolbar-pop', this.hdrEle);
         if (tbPop && tbPop.classList.contains('e-popup-close')) {
             var tbPopObj = (tbPop && tbPop.ej2_instances[0]);
-            tbPopObj.position.X = (this.headerPlacement === 'Left') ? 'left' : 'right';
+            tbPopObj.position.X = (this.headerPlacement === 'Left' || this.element.classList.contains(CLS_RTL)) ? 'left' : 'right';
             tbPopObj.dataBind();
             tbPopObj.show(config);
         }
@@ -2387,7 +2387,7 @@ var Tab = /** @class */ (function (_super) {
         Property(false)
     ], Tab.prototype, "enablePersistence", void 0);
     __decorate([
-        Property(false)
+        Property(true)
     ], Tab.prototype, "enableHtmlSanitizer", void 0);
     __decorate([
         Property(false)

package/src/toolbar/toolbar.d.ts

@@ -402,6 +402,7 @@ export declare class Toolbar extends Component<HTMLElement> implements INotifyPr
     private eleFocus;
     private clickHandler;
     private popupClickHandler;
+    private getToolbarPopupWidth;
     /**
      * To Initialize the control rendering
      *