@syncfusion/ej2-navigations 20.4.53 → 21.1.37

package/src/sidebar/sidebar.d.ts

@@ -4,11 +4,35 @@ import { SidebarModel } from './sidebar-model';
 /**
  * Specifies the Sidebar types.
  */
-export declare type SidebarType = 'Slide' | 'Over' | 'Push' | 'Auto';
+export declare type SidebarType = 
+/**
+* Specifies the animation sliding while opening the sidebar.
+*/
+'Slide' | 
+/**
+* Specifies the sidebar appearing over the main content.
+*/
+'Over' | 
+/**
+* Specifies the sidebar pushing the main content.
+*/
+'Push' | 
+/**
+* Specifies that the sidebar opens automatically.
+*/
+'Auto';
 /**
  * Specifies the Sidebar positions.
  */
-export declare type SidebarPosition = 'Left' | 'Right';
+export declare type SidebarPosition = 
+/**
+* Sidebar positions to the Left in relation to the main content.
+*/
+'Left' | 
+/**
+* Sidebar positions to the Right in relation to the main content.
+*/
+'Right';
 /**
  * Sidebar is an expandable or collapsible
  * component that typically act as a side container to place the primary or secondary content alongside of the main content.

package/src/sidebar/sidebar.js

@@ -151,7 +151,7 @@ var Sidebar = /** @class */ (function (_super) {
         setStyle(this.element, { 'z-index': '' + this.zIndex });
     };
     Sidebar.prototype.addClass = function () {
-        if (this.element.tagName === "EJS-SIDEBAR") {
+        if (this.element.tagName === 'EJS-SIDEBAR') {
             addClass([this.element], DISPLAY);
         }
         var classELement = document.querySelector('.e-main-content');

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

@@ -73,11 +73,11 @@ export interface HeaderModel {
 
     /**
      * Options for positioning the icon in the Tab item header. This property depends on `iconCss` property.
-     * The possible values are:
-     * - Left: Places the icon to the `left` of the item.
-     * - Top: Places the icon on the `top` of the item.
-     * - Right: Places the icon to the `right` end of the item.
-     * - Bottom: Places the icon at the `bottom` of the item.
+     * The possible values for this property as follows
+     * * `Left`: Places the icon to the left of the item.
+     * * `Top`: Places the icon on the top of the item.
+     * * `Right`: Places the icon to the right end of the item.
+     * * `Bottom`: Places the icon at the bottom of the item.
      *
      * @default 'left'
      */
@@ -212,11 +212,11 @@ export interface TabModel extends ComponentModel{
 
     /**
      * Specifies the orientation of Tab header.
-     * The possible values are:
-     * - Top: Places the Tab header on the top.
-     * - Bottom: Places the Tab header at the bottom.
-     * - Left: Places the Tab header on the left.
-     * - Right: Places the Tab header at the right.
+     * The possible values for this property as follows
+     * * `Top`: Places the Tab header on the top.
+     * * `Bottom`: Places the Tab header at the bottom.
+     * * `Left`: Places the Tab header on the left.
+     * * `Right`: Places the Tab header at the right.
      *
      * @default 'Top'
      */
@@ -224,11 +224,11 @@ export interface TabModel extends ComponentModel{
 
     /**
      * Specifies the height style for Tab content.
-     * The possible values are:
-     * - None: Based on the given height property, the content panel height is set.
-     * - Auto: Tallest panel height of a given Tab content is set to all the other panels.
-     * - Content: Based on the corresponding content height, the content panel height is set.
-     * - Fill: Based on the parent height, the content panel height is set.
+     * The possible values for this property as follows
+     * * `None`: Based on the given height property, the content panel height is set.
+     * * `Auto`: Tallest panel height of a given Tab content is set to all the other panels.
+     * * `Content`: Based on the corresponding content height, the content panel height is set.
+     * * `Fill`: Based on the parent height, the content panel height is set.
      *
      * @default 'Content'
      */
@@ -237,8 +237,8 @@ export interface TabModel extends ComponentModel{
     /**
      * Specifies the Tab display mode when Tab content exceeds the viewing area.
      * The possible modes are:
-     * - Scrollable: All the elements are displayed in a single line with horizontal scrolling enabled.
-     * - Popup: Tab container holds the items that can be placed within the available space and rest of the items are moved to the popup.
+     * * `Scrollable`: All the elements are displayed in a single line with horizontal scrolling enabled.
+     * * `Popup`: Tab container holds the items that can be placed within the available space and rest of the items are moved to the popup.
      * If the popup content overflows the height of the page, the rest of the elements can be viewed by scrolling the popup.
      *
      * @default 'Scrollable'
@@ -248,9 +248,9 @@ export interface TabModel extends ComponentModel{
     /**
      * Specifies the modes for Tab content.
      * The possible modes are:
-     * `Dynamic` Load Tab content dynamically at the time of switching it's header.
-     * `Init` Load all tab contents at initial load.
-     * `Demand` Load Tab content when required but keep content once it is rendered.
+     * * `Demand` - The content of the selected tab alone is loaded initially. The content of the tabs which were loaded once will be maintained in the DOM.
+     * * `Dynamic` - The content of all the tabs are rendered on the initial load and maintained in the DOM.
+     * * `Init` - The content of all the tabs are rendered on the initial load and maintained in the DOM.
      *
      * @default 'Dynamic'
      */

package/src/tab/tab.d.ts

@@ -6,15 +6,32 @@ import { OverflowMode } from '../toolbar/toolbar';
 import { TabModel, TabItemModel, HeaderModel, TabActionSettingsModel, TabAnimationSettingsModel } from './tab-model';
 declare type HTEle = HTMLElement;
 /**
- * Options to set the orientation of Tab header.
+ * Specifies the orientation of the Tab header.
+ * ```props
+ * Top :- Places the Tab header on the top.
+ * Bottom :- Places the Tab header on the bottom.
+ * Left :- Places the Tab header on the left.
+ * Right :- Places the Tab header on the right.
+ * ```
  */
 export declare type HeaderPosition = 'Top' | 'Bottom' | 'Left' | 'Right';
 /**
  * Options to set the content element height adjust modes.
+ * ```props
+ * None :- Based on the given height property, the content panel height is set.
+ * Auto :- Tallest panel height of a given Tab content is set to all the other panels.
+ * Content :- Based on the corresponding content height, the content panel height is set.
+ * Fill :- Content element take height based on the parent height.
+ * ```
  */
 export declare type HeightStyles = 'None' | 'Auto' | 'Content' | 'Fill';
 /**
  * Specifies the options of Tab content display mode.
+ * ```props
+ * Demand :- The content of the selected tab alone is loaded initially. The content of the tabs which were loaded once will be maintained in the DOM.
+ * Dynamic :- The content of all the tabs are rendered on the initial load and maintained in the DOM.
+ * Init :- The content of all the tabs are rendered on the initial load and maintained in the DOM.
+ * ```
  */
 export declare type ContentLoad = 'Dynamic' | 'Init' | 'Demand';
 /** An interface that holds options to control the selected item action. */
@@ -139,11 +156,11 @@ export declare class Header extends ChildProperty<Header> {
     iconCss: string;
     /**
      * Options for positioning the icon in the Tab item header. This property depends on `iconCss` property.
-     * The possible values are:
-     * - Left: Places the icon to the `left` of the item.
-     * - Top: Places the icon on the `top` of the item.
-     * - Right: Places the icon to the `right` end of the item.
-     * - Bottom: Places the icon at the `bottom` of the item.
+     * The possible values for this property as follows
+     * * `Left`: Places the icon to the left of the item.
+     * * `Top`: Places the icon on the top of the item.
+     * * `Right`: Places the icon to the right end of the item.
+     * * `Bottom`: Places the icon at the bottom of the item.
      *
      * @default 'left'
      */
@@ -319,22 +336,22 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
     selectedItem: number;
     /**
      * Specifies the orientation of Tab header.
-     * The possible values are:
-     * - Top: Places the Tab header on the top.
-     * - Bottom: Places the Tab header at the bottom.
-     * - Left: Places the Tab header on the left.
-     * - Right: Places the Tab header at the right.
+     * The possible values for this property as follows
+     * * `Top`: Places the Tab header on the top.
+     * * `Bottom`: Places the Tab header at the bottom.
+     * * `Left`: Places the Tab header on the left.
+     * * `Right`: Places the Tab header at the right.
      *
      * @default 'Top'
      */
     headerPlacement: HeaderPosition;
     /**
      * Specifies the height style for Tab content.
-     * The possible values are:
-     * - None: Based on the given height property, the content panel height is set.
-     * - Auto: Tallest panel height of a given Tab content is set to all the other panels.
-     * - Content: Based on the corresponding content height, the content panel height is set.
-     * - Fill: Based on the parent height, the content panel height is set.
+     * The possible values for this property as follows
+     * * `None`: Based on the given height property, the content panel height is set.
+     * * `Auto`: Tallest panel height of a given Tab content is set to all the other panels.
+     * * `Content`: Based on the corresponding content height, the content panel height is set.
+     * * `Fill`: Based on the parent height, the content panel height is set.
      *
      * @default 'Content'
      */
@@ -342,8 +359,8 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
     /**
      * Specifies the Tab display mode when Tab content exceeds the viewing area.
      * The possible modes are:
-     * - Scrollable: All the elements are displayed in a single line with horizontal scrolling enabled.
-     * - Popup: Tab container holds the items that can be placed within the available space and rest of the items are moved to the popup.
+     * * `Scrollable`: All the elements are displayed in a single line with horizontal scrolling enabled.
+     * * `Popup`: Tab container holds the items that can be placed within the available space and rest of the items are moved to the popup.
      * If the popup content overflows the height of the page, the rest of the elements can be viewed by scrolling the popup.
      *
      * @default 'Scrollable'
@@ -352,9 +369,9 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
     /**
      * Specifies the modes for Tab content.
      * The possible modes are:
-     * `Dynamic` Load Tab content dynamically at the time of switching it's header.
-     * `Init` Load all tab contents at initial load.
-     * `Demand` Load Tab content when required but keep content once it is rendered.
+     * * `Demand` - The content of the selected tab alone is loaded initially. The content of the tabs which were loaded once will be maintained in the DOM.
+     * * `Dynamic` - The content of all the tabs are rendered on the initial load and maintained in the DOM.
+     * * `Init` - The content of all the tabs are rendered on the initial load and maintained in the DOM.
      *
      * @default 'Dynamic'
      */

package/src/tab/tab.js

@@ -406,7 +406,7 @@ var Tab = /** @class */ (function (_super) {
                     }).outerHTML;
                     var wrap = _this.createElement('div', {
                         className: CLS_WRAP, innerHTML: cont,
-                        attrs: { role: 'tab', tabIndex: '-1', 'aria-selected': 'false', 'aria-controls': CLS_CONTENT + _this.tabId + '_' + index }
+                        attrs: { role: 'tab', tabIndex: '-1', 'aria-selected': 'false', 'aria-controls': CLS_CONTENT + _this.tabId + '_' + index, 'aria-disabled': 'false' }
                     });
                     tabItems_1.appendChild(_this.createElement('div', attr));
                     selectAll('.' + CLS_ITEM, tabItems_1)[index].appendChild(wrap);
@@ -536,7 +536,7 @@ var Tab = /** @class */ (function (_super) {
                 }
             }
             var tabIndex = isNOU(item.tabIndex) ? '-1' : item.tabIndex.toString();
-            var wrapAttrs = (item.disabled) ? {} : { tabIndex: tabIndex, 'data-tabindex': tabIndex, role: 'tab', 'aria-selected': 'false' };
+            var wrapAttrs = (item.disabled) ? {} : { tabIndex: tabIndex, 'data-tabindex': tabIndex, role: 'tab', 'aria-selected': 'false', 'aria-disabled': 'false' };
             tCont.appendChild(_this.btnCls.cloneNode(true));
             var wrap = _this.createElement('div', { className: CLS_WRAP, attrs: wrapAttrs });
             wrap.appendChild(tCont);
@@ -1356,6 +1356,7 @@ var Tab = /** @class */ (function (_super) {
         var scrCnt = select('.' + this.scrCntClass, this.tbItems);
         if (!this.isVertical() && !isNOU(scrCnt)) {
             var scrBar = select('.e-hscroll-bar', this.tbItems);
+            scrBar.removeAttribute('tabindex');
             var scrStart = scrBar.scrollLeft;
             var scrEnd = scrStart + scrBar.offsetWidth;
             var eleStart = target.offsetLeft;
@@ -1728,7 +1729,7 @@ var Tab = /** @class */ (function (_super) {
             this.items[index].disabled = !value;
             this.dataBind();
         }
-        tbItems.setAttribute('aria-disabled', (value === true) ? 'false' : 'true');
+        tbItems.firstElementChild.setAttribute('aria-disabled', (value === true) ? 'false' : 'true');
     };
     /**
      * Adds new items to the Tab that accepts an array as Tab items.
@@ -1850,13 +1851,14 @@ var Tab = /** @class */ (function (_super) {
                 var cntTrg = select('#' + CLS_CONTENT + _this.tabId + '_' + _this.extIndex(trg.id), select('.' + CLS_CONTENT, _this.element));
                 if (!isNOU(cntTrg)) {
                     var registeredTemplate = _this.registeredTemplate;
+                    var portal = _this.portals;
                     if (registeredTemplate && registeredTemplate.content) {
                         var templateToClear = [];
-                        for (var i = 0; i < registeredTemplate.content.length; i++) {
-                            var registeredItem = registeredTemplate.content[i].rootNodes[0];
-                            var closestItem = closest(registeredItem, '.' + CLS_ITEM);
-                            if (!isNullOrUndefined(registeredItem) && closestItem === cntTrg) {
-                                templateToClear.push(registeredTemplate.content[i]);
+                        for (var i_2 = 0; i_2 < registeredTemplate.content.length; i_2++) {
+                            var registeredItem = registeredTemplate.content[i_2].rootNodes[0];
+                            var closestItem_1 = closest(registeredItem, '.' + CLS_ITEM);
+                            if (!isNullOrUndefined(registeredItem) && closestItem_1 === cntTrg) {
+                                templateToClear.push(registeredTemplate.content[i_2]);
                                 break;
                             }
                         }
@@ -1864,6 +1866,16 @@ var Tab = /** @class */ (function (_super) {
                             _this.clearTemplate(['content'], templateToClear);
                         }
                     }
+                    else if (portal) {
+                        for (var i = 0; i < portal.length; i++) {
+                            var portalItem = portal[i];
+                            var closestItem = closest(portalItem.containerInfo, '.' + CLS_ITEM);
+                            if (!isNullOrUndefined(portalItem) && closestItem === cntTrg) {
+                                _this.clearTemplate(['content'], i);
+                                break;
+                            }
+                        }
+                    }
                     detach(cntTrg);
                 }
                 _this.trigger('removed', tabRemovingArgs);
@@ -2240,7 +2252,7 @@ var Tab = /** @class */ (function (_super) {
                     }
                 }
                 var tabIndex = isNOU(item.tabIndex) ? '-1' : item.tabIndex.toString();
-                var wrapAtt = (item.disabled) ? {} : { tabIndex: tabIndex, 'data-tabindex': tabIndex, role: 'tab', 'aria-selected': 'true' };
+                var wrapAtt = (item.disabled) ? {} : { tabIndex: tabIndex, 'data-tabindex': tabIndex, role: 'tab', 'aria-selected': 'true', 'aria-disabled': 'false' };
                 tConts.appendChild(this.btnCls.cloneNode(true));
                 var wraper = this.createElement('div', { className: CLS_WRAP, attrs: wrapAtt });
                 wraper.appendChild(tConts);
@@ -2302,7 +2314,7 @@ var Tab = /** @class */ (function (_super) {
             var tabIndex = element.firstElementChild.getAttribute('data-tabindex');
             var wrap = this.createElement('div', {
                 className: CLS_WRAP, innerHTML: conte,
-                attrs: { tabIndex: tabIndex, 'data-tabindex': tabIndex, role: 'tab', 'aria-controls': CLS_CONTENT + this.tabId + '_' + index, 'aria-selected': 'true' }
+                attrs: { tabIndex: tabIndex, 'data-tabindex': tabIndex, role: 'tab', 'aria-controls': CLS_CONTENT + this.tabId + '_' + index, 'aria-selected': 'true', 'aria-disabled': 'false' }
             });
             tabItems.insertBefore(this.createElement('div', attr), tabItems.children[index + 1]);
             this.element.querySelector('.' + CLS_TB_ITEM + '.' + CLS_ACTIVE).appendChild(wrap);

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

@@ -75,10 +75,10 @@ export interface ItemModel {
 
     /**
      * Specifies the Toolbar command display area when an element's content is too large to fit available space.
-     * This is applicable only to `popup` mode. Possible values are:
-     * - Show:  Always shows the item as the primary priority on the *Toolbar*.
-     * - Hide: Always shows the item as the secondary priority on the *popup*.
-     * - None: No priority for display, and as per normal order moves to popup when content exceeds.
+     * This is applicable only to `popup` mode. The possible values for this property as follows
+     * * `Show`:  Always shows the item as the primary priority on the *Toolbar*.
+     * * `Hide`: Always shows the item as the secondary priority on the *popup*.
+     * * `None`: No priority for display, and as per normal order moves to popup when content exceeds.
      *
      * @default 'None'
      */
@@ -97,9 +97,9 @@ export interface ItemModel {
     /**
      * 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 that is applicable to template rendering with Syncfusion controls like DropDownList,
+     * * `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 that is applicable to template rendering with Syncfusion controls like DropDownList,
      * AutoComplete, etc.
      *
      * @default 'Button'
@@ -108,10 +108,10 @@ export interface ItemModel {
 
     /**
      * Specifies where the button text will be displayed on *popup mode* of the Toolbar.
-     * Possible values are:
-     * - Toolbar:  Text will be displayed on *Toolbar* only.
-     * - Overflow: Text will be displayed only when content overflows to *popup*.
-     * - Both: Text will be displayed on *popup* and *Toolbar*.
+     * The possible values for this property as follows
+     * * `Toolbar`:  Text will be displayed on *Toolbar* only.
+     * * `Overflow`: Text will be displayed only when content overflows to *popup*.
+     * * `Both`: Text will be displayed on *popup* and *Toolbar*.
      *
      * @default 'Both'
      */
@@ -134,10 +134,10 @@ export interface ItemModel {
 
     /**
      * Specifies the location for aligning Toolbar items on the Toolbar. Each command will be aligned according to the `align` property.
-     * Possible values are:
-     * - Left: To align commands to the left side of the Toolbar.
-     * - Center: To align commands at the center of the Toolbar.
-     * - Right: To align commands to the right side of the Toolbar.
+     * The possible values for this property as follows
+     * * `Left`: To align commands to the left side of the Toolbar.
+     * * `Center`: To align commands at the center of the Toolbar.
+     * * `Right`: To align commands to the right side of the Toolbar.
      * ```html
      * <div id="element"> </div>
      * ```
@@ -210,7 +210,7 @@ export interface ToolbarModel extends ComponentModel{
 
     /**
      * Specifies the Toolbar display mode when Toolbar content exceeds the viewing area.
-     * Possible modes are:
+     * The possible values for this property as follows
      * - Scrollable: All the elements are displayed in a single line with horizontal scrolling enabled.
      * - Popup: Prioritized elements are displayed on the Toolbar and the rest of elements are moved to the *popup*.
      * - MultiRow: Displays the overflow toolbar items as an in-line of a toolbar.
@@ -223,6 +223,12 @@ export interface ToolbarModel extends ComponentModel{
 
     /**
      * Specifies the scrolling distance in scroller.
+     * The possible values for this property as follows
+     * * Scrollable - All the elements are displayed in a single line with horizontal scrolling enabled.
+     * * Popup - Prioritized elements are displayed on the Toolbar and the rest of elements are moved to the *popup*.
+     * * MultiRow - Displays the overflow toolbar items as an in-line of a toolbar.
+     * * Extended - Hide the overflowing toolbar items in the next row.  Show the overflowing toolbar items when you click the expand icons.
+     * * If the popup content overflows the height of the page, the rest of the elements will be hidden.
      *
      * @default null
      */

package/src/toolbar/toolbar.d.ts

@@ -3,22 +3,48 @@ import { INotifyPropertyChanged, ChildProperty } from '@syncfusion/ej2-base';
 import { ToolbarModel, ItemModel } from './toolbar-model';
 /**
  * Specifies the options for supporting element types of Toolbar command.
+ * ```props
+ * 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 that is applicable to template rendering with Syncfusion controls like DropDownList, AutoComplete, etc.
+ * ```
  */
 export declare type ItemType = 'Button' | 'Separator' | 'Input';
 /**
  * Specifies the options of where the text will be displayed in popup mode of the Toolbar.
+ * ```props
+ * Toolbar :-  Text will be displayed on Toolbar only.
+ * Overflow :- Text will be displayed only when content overflows to popup.
+ * Both :- Text will be displayed on popup and Toolbar.
+ * ```
  */
 export declare type DisplayMode = 'Both' | 'Overflow' | 'Toolbar';
 /**
  * Specifies the options of the Toolbar item display area when the Toolbar content overflows to available space.Applicable to `popup` mode.
+ * ```props
+ * Show :- Always shows the item as the primary priority on the *Toolbar*.
+ * Hide :- Always shows the item as the secondary priority on the *popup*.
+ * None :- No priority for display, and as per normal order moves to popup when content exceeds.
+ * ```
  */
 export declare type OverflowOption = 'None' | 'Show' | 'Hide';
 /**
  * Specifies the options of Toolbar display mode. Display option is considered when Toolbar content exceeds the available space.
+ * ```props
+ * Scrollable :- All the elements are displayed in a single line with horizontal scrolling enabled.
+ * Popup :- Prioritized elements are displayed on the Toolbar and the rest of elements are moved to the popup.
+ * MultiRow :- Displays the overflow toolbar items as an in-line of a toolbar.
+ * Extended :- Hide the overflowing toolbar items in the next row. Show the overflowing toolbar items when you click the expand icons, if the popup content overflows the height of the page, the rest of the elements will be hidden.
+ * ```
  */
 export declare type OverflowMode = 'Scrollable' | 'Popup' | 'MultiRow' | 'Extended';
 /**
  * Specifies the options for aligning the Toolbar items.
+ * ```props
+ * Left :- To align commands to the left side of the Toolbar.
+ * Center :- To align commands at the center of the Toolbar.
+ * Right :- To align commands to the right side of the Toolbar.
+ * ```
  */
 export declare type ItemAlign = 'Left' | 'Center' | 'Right';
 /** An interface that holds options to control the toolbar clicked action. */
@@ -102,10 +128,10 @@ export declare class Item extends ChildProperty<Item> {
     visible: boolean;
     /**
      * Specifies the Toolbar command display area when an element's content is too large to fit available space.
-     * This is applicable only to `popup` mode. Possible values are:
-     * - Show:  Always shows the item as the primary priority on the *Toolbar*.
-     * - Hide: Always shows the item as the secondary priority on the *popup*.
-     * - None: No priority for display, and as per normal order moves to popup when content exceeds.
+     * This is applicable only to `popup` mode. The possible values for this property as follows
+     * * `Show`:  Always shows the item as the primary priority on the *Toolbar*.
+     * * `Hide`: Always shows the item as the secondary priority on the *popup*.
+     * * `None`: No priority for display, and as per normal order moves to popup when content exceeds.
      *
      * @default 'None'
      */
@@ -122,9 +148,9 @@ export declare class Item extends ChildProperty<Item> {
     /**
      * 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 that is applicable to template rendering with Syncfusion controls like DropDownList,
+     * * `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 that is applicable to template rendering with Syncfusion controls like DropDownList,
      * AutoComplete, etc.
      *
      * @default 'Button'
@@ -132,10 +158,10 @@ export declare class Item extends ChildProperty<Item> {
     type: ItemType;
     /**
      * Specifies where the button text will be displayed on *popup mode* of the Toolbar.
-     * Possible values are:
-     * - Toolbar:  Text will be displayed on *Toolbar* only.
-     * - Overflow: Text will be displayed only when content overflows to *popup*.
-     * - Both: Text will be displayed on *popup* and *Toolbar*.
+     * The possible values for this property as follows
+     * * `Toolbar`:  Text will be displayed on *Toolbar* only.
+     * * `Overflow`: Text will be displayed only when content overflows to *popup*.
+     * * `Both`: Text will be displayed on *popup* and *Toolbar*.
      *
      * @default 'Both'
      */
@@ -157,10 +183,10 @@ export declare class Item extends ChildProperty<Item> {
     tooltipText: string;
     /**
      * Specifies the location for aligning Toolbar items on the Toolbar. Each command will be aligned according to the `align` property.
-     * Possible values are:
-     * - Left: To align commands to the left side of the Toolbar.
-     * - Center: To align commands at the center of the Toolbar.
-     * - Right: To align commands to the right side of the Toolbar.
+     * The possible values for this property as follows
+     * * `Left`: To align commands to the left side of the Toolbar.
+     * * `Center`: To align commands at the center of the Toolbar.
+     * * `Right`: To align commands to the right side of the Toolbar.
      * ```html
      * <div id="element"> </div>
      * ```
@@ -253,7 +279,7 @@ export declare class Toolbar extends Component<HTMLElement> implements INotifyPr
     cssClass: string;
     /**
      * Specifies the Toolbar display mode when Toolbar content exceeds the viewing area.
-     * Possible modes are:
+     * The possible values for this property as follows
      * - Scrollable: All the elements are displayed in a single line with horizontal scrolling enabled.
      * - Popup: Prioritized elements are displayed on the Toolbar and the rest of elements are moved to the *popup*.
      * - MultiRow: Displays the overflow toolbar items as an in-line of a toolbar.
@@ -265,6 +291,12 @@ export declare class Toolbar extends Component<HTMLElement> implements INotifyPr
     overflowMode: OverflowMode;
     /**
      * Specifies the scrolling distance in scroller.
+     * The possible values for this property as follows
+     * * Scrollable - All the elements are displayed in a single line with horizontal scrolling enabled.
+     * * Popup - Prioritized elements are displayed on the Toolbar and the rest of elements are moved to the *popup*.
+     * * MultiRow - Displays the overflow toolbar items as an in-line of a toolbar.
+     * * Extended - Hide the overflowing toolbar items in the next row.  Show the overflowing toolbar items when you click the expand icons.
+     * * If the popup content overflows the height of the page, the rest of the elements will be hidden.
      *
      * @default null
      */

package/src/toolbar/toolbar.js

@@ -1562,7 +1562,9 @@ var Toolbar = /** @class */ (function (_super) {
         innerEle.forEach(function (ele) {
             if (ele.tagName === 'DIV') {
                 _this.tbarEle.push(ele);
-                ele.setAttribute('aria-disabled', 'false');
+                if (!isNOU(ele.firstElementChild)) {
+                    ele.firstElementChild.setAttribute('aria-disabled', 'false');
+                }
                 _this.add(ele, CLS_ITEM);
             }
         });
@@ -1616,11 +1618,15 @@ var Toolbar = /** @class */ (function (_super) {
         var enable = function (isEnable, ele) {
             if (isEnable) {
                 ele.classList.remove(CLS_DISABLE);
-                ele.setAttribute('aria-disabled', 'false');
+                if (!isNOU(ele.firstElementChild)) {
+                    ele.firstElementChild.setAttribute('aria-disabled', 'false');
+                }
             }
             else {
                 ele.classList.add(CLS_DISABLE);
-                ele.setAttribute('aria-disabled', 'true');
+                if (!isNOU(ele.firstElementChild)) {
+                    ele.firstElementChild.setAttribute('aria-disabled', 'true');
+                }
             }
         };
         if (!isNOU(len) && len >= 1) {
@@ -1897,7 +1903,6 @@ var Toolbar = /** @class */ (function (_super) {
     Toolbar.prototype.renderSubComponent = function (item, index) {
         var dom;
         var innerEle = this.createElement('div', { className: CLS_ITEM });
-        innerEle.setAttribute('aria-disabled', 'false');
         var tempDom = this.createElement('div', {
             innerHTML: this.enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(item.tooltipText) : item.tooltipText
         });
@@ -1923,6 +1928,7 @@ var Toolbar = /** @class */ (function (_super) {
                     dom.setAttribute('tabindex', isNOU(item.tabIndex) ? '-1' : item.tabIndex.toString());
                     dom.setAttribute('data-tabindex', isNOU(item.tabIndex) ? '-1' : item.tabIndex.toString());
                     dom.setAttribute('aria-label', (item.text || item.tooltipText));
+                    dom.setAttribute('aria-disabled', 'false');
                     innerEle.appendChild(dom);
                     innerEle.addEventListener('click', this.itemClick.bind(this));
                     break;

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

@@ -71,8 +71,8 @@ export interface FieldsSettingsModel {
     query?: Query;
 
     /**
-     * Specifies whether the node can be selected by users or not 
-     * When set to false, the user interaction is prevented for the corresponding node. 
+     * Specifies whether the node can be selected by users or not
+     * When set to false, the user interaction is prevented for the corresponding node.
      */
     selectable?: string;
 
@@ -180,8 +180,8 @@ export interface TreeViewModel extends ComponentModel{
 
     /**
      * Enables or disables multi-selection of nodes. To select multiple nodes:
-     * * Select the nodes by holding down the CTRL key while clicking on the nodes.
-     * * Select consecutive nodes by clicking the first node to select and hold down the **SHIFT** key
+     * * Select the nodes by holding down the **Ctrl** key while clicking on the nodes.
+     * * Select consecutive nodes by clicking the first node to select and hold down the **Shift** key
      * and click the last node to select.
      *
      * For more information on multi-selection, refer to