@syncfusion/ej2-navigations 20.4.52 → 21.1.35

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.4.52
+*  version : 21.1.35
 *  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@20.4.51",
+  "_id": "@syncfusion/ej2-navigations@19.91.2",
   "_inBundle": false,
-  "_integrity": "sha512-Q8VMoyJrQ0tCiJxta0IDxJQ24N7zIDVLNct8uCnBwIkv62ew/RJ5/9/E2yADfBJamQ+nTlcwqWVpp5OmDAIuog==",
+  "_integrity": "sha512-FnIM7kr9mqhNExCiXgyDSOrszPnGmx8fJN6Ont7C4v5Ct6NB0O3Jwm9X/t6jj8wzB/LIK6YlmNMluAXfBfdCjw==",
   "_location": "/@syncfusion/ej2-navigations",
   "_phantomChildren": {},
   "_requested": {
@@ -33,15 +33,16 @@
     "/@syncfusion/ej2-pdfviewer",
     "/@syncfusion/ej2-pivotview",
     "/@syncfusion/ej2-react-navigations",
+    "/@syncfusion/ej2-ribbon",
     "/@syncfusion/ej2-richtexteditor",
     "/@syncfusion/ej2-schedule",
     "/@syncfusion/ej2-spreadsheet",
     "/@syncfusion/ej2-vue-navigations"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-navigations/-/ej2-navigations-20.4.51.tgz",
-  "_shasum": "d49a33648a6e91d4683c4da0c4043d5ad6e2fc64",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-navigations/-/ej2-navigations-19.91.2.tgz",
+  "_shasum": "61437a55b10750960cf8764651ace17b20b694f3",
   "_spec": "@syncfusion/ej2-navigations@*",
-  "_where": "/jenkins/workspace/ease-automation_release_19.1.0.1/packages/included",
+  "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
@@ -50,12 +51,12 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.4.51",
-    "@syncfusion/ej2-buttons": "~20.4.50",
-    "@syncfusion/ej2-data": "~20.4.48",
-    "@syncfusion/ej2-inputs": "~20.4.52",
-    "@syncfusion/ej2-lists": "~20.4.50",
-    "@syncfusion/ej2-popups": "~20.4.52"
+    "@syncfusion/ej2-base": "~21.1.35",
+    "@syncfusion/ej2-buttons": "~21.1.35",
+    "@syncfusion/ej2-data": "~21.1.35",
+    "@syncfusion/ej2-inputs": "~21.1.35",
+    "@syncfusion/ej2-lists": "~21.1.35",
+    "@syncfusion/ej2-popups": "~21.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",
@@ -160,6 +161,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "20.4.52",
+  "version": "21.1.35",
   "sideEffects": false
 }

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

@@ -65,7 +65,7 @@ export interface AccordionItemModel {
      *   let accordionObj: Accordion = new Accordion( {
      *        items: [
      *          { header: 'Accordion Header', content: 'Accordion Content' },
-     *          { header: '<div>Accordion Header</div>', content: '<div>Accordion Content</div' },
+     *          { header: '<div>Accordion Header</div>', content: '<div>Accordion Content</div>' },
      *          { header: '#headerContent', content: '#panelContent' }]
      *        });
      *   accordionObj.appendTo('#accordion');
@@ -83,7 +83,7 @@ export interface AccordionItemModel {
      *   let accordionObj: Accordion = new Accordion( {
      *        items: [
      *          { header: 'Accordion Header', content: 'Accordion Content' },
-     *          { header: '<div>Accordion Header</div>', content: '<div>Accordion Content</div' },
+     *          { header: '<div>Accordion Header</div>', content: '<div>Accordion Content</div>' },
      *          { header: '#headerContent', content: '#panelContent' }]
      *        });
      *   accordionObj.appendTo('#accordion');
@@ -216,8 +216,8 @@ export interface AccordionModel extends ComponentModel{
     /**
      * Specifies the options to expand single or multiple panel at a time.
      * The possible values are:
-     * - Single: Sets to expand only one Accordion item at a time.
-     * - Multiple: Sets to expand more than one Accordion item at a time.
+     * * `Single`: Sets to expand only one Accordion item at a time.
+     * * `Multiple`: Sets to expand more than one Accordion item at a time.
      *
      * @default 'Multiple'
      */

package/src/accordion/accordion.d.ts

@@ -4,6 +4,10 @@ import { INotifyPropertyChanged, ChildProperty } from '@syncfusion/ej2-base';
 import { AccordionModel, AccordionItemModel, AccordionAnimationSettingsModel, AccordionActionSettingsModel } from './accordion-model';
 /**
  * Specifies the option to expand single or multiple panel at a time.
+ * ```props
+ * Single :- Only one Accordion item can be expanded at a time.
+ * Multiple :- Multiple Accordion items can be expanded simultaneously.
+ * ```
  */
 export declare type ExpandMode = 'Single' | 'Multiple';
 /** An interface that holds options to control the accordion click action. */
@@ -96,7 +100,7 @@ export declare class AccordionItem extends ChildProperty<AccordionItem> {
      *   let accordionObj: Accordion = new Accordion( {
      *        items: [
      *          { header: 'Accordion Header', content: 'Accordion Content' },
-     *          { header: '<div>Accordion Header</div>', content: '<div>Accordion Content</div' },
+     *          { header: '<div>Accordion Header</div>', content: '<div>Accordion Content</div>' },
      *          { header: '#headerContent', content: '#panelContent' }]
      *        });
      *   accordionObj.appendTo('#accordion');
@@ -113,7 +117,7 @@ export declare class AccordionItem extends ChildProperty<AccordionItem> {
      *   let accordionObj: Accordion = new Accordion( {
      *        items: [
      *          { header: 'Accordion Header', content: 'Accordion Content' },
-     *          { header: '<div>Accordion Header</div>', content: '<div>Accordion Content</div' },
+     *          { header: '<div>Accordion Header</div>', content: '<div>Accordion Content</div>' },
      *          { header: '#headerContent', content: '#panelContent' }]
      *        });
      *   accordionObj.appendTo('#accordion');
@@ -253,8 +257,8 @@ export declare class Accordion extends Component<HTMLElement> implements INotify
     /**
      * Specifies the options to expand single or multiple panel at a time.
      * The possible values are:
-     * - Single: Sets to expand only one Accordion item at a time.
-     * - Multiple: Sets to expand more than one Accordion item at a time.
+     * * `Single`: Sets to expand only one Accordion item at a time.
+     * * `Multiple`: Sets to expand more than one Accordion item at a time.
      *
      * @default 'Multiple'
      */

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

@@ -9,9 +9,9 @@ export interface AppBarModel extends ComponentModel{
 
     /**
      * Specifies the mode of the AppBar that defines the AppBar height. The possible values for this property are as follows:
-     * * Regular
-     * * Prominent
-     * * Dense
+     * * `Regular`: Specifies default height for the AppBar.
+     * * `Prominent`: Specifies longer height for the AppBar to show the longer titles and images, or to provide a stronger presence.
+     * * `Dense`: Specifies compressed (short) height for the AppBar to accommodate all the app bar content in a denser layout.
      *
      * @default 'Regular'
      */
@@ -19,8 +19,8 @@ export interface AppBarModel extends ComponentModel{
 
     /**
      * Specifies the position of the AppBar. The possible values for this property are as follows:
-     * * Top
-     * * Bottom
+     * * `Top`: Position the AppBar at the top.
+     * * `Bottom`: Position the AppBar at the bottom.
      *
      * @default 'Top'
      */
@@ -50,10 +50,10 @@ export interface AppBarModel extends ComponentModel{
 
     /**
      * Specifies the color mode that defines the color of the AppBar component. The possible values for this property are as follows:
-     * * Light
-     * * Dark
-     * * Primary
-     * * Inherit
+     * * `Light`: Specifies the AppBar in light color.
+     * * `Dark`: Specifies the AppBar in dark color.
+     * * `Primary`: Specifies the AppBar in a primary color.
+     * * `Inherit`: Inherit color from parent for AppBar. AppBar background and colors are inherited from its parent element.
      *
      * @default 'Light'
      */

package/src/appbar/appbar.d.ts

@@ -2,26 +2,29 @@ import { Component, INotifyPropertyChanged, EmitType } from '@syncfusion/ej2-bas
 import { AppBarModel } from './appbar-model';
 /**
  * Specifies the height mode of the AppBar component which defines the height of the AppBar.
- *
- * * `Regular` - Specifies default height for the AppBar.
- * * `Prominent` - Specifies longer height for the AppBar to show the longer titles and images, or to provide a stronger presence.
- * * `Dense` - Specifies compressed (short) height for the AppBar to accommodate all the app bar content in a denser layout.
+ * ```props
+ * Regular :- Specifies default height for the AppBar.
+ * Prominent :- Specifies longer height for the AppBar to show the longer titles and images, or to provide a stronger presence.
+ * Dense :- Specifies compressed (short) height for the AppBar to accommodate all the app bar content in a denser layout.
+ * ```
  */
 export declare type AppBarMode = 'Regular' | 'Prominent' | 'Dense';
 /**
  * Specifies the position of the AppBar.
- *
- * * `Top` - Position the AppBar at the top.
- * * `Bottom` - Position the AppBar at the bottom.
+ * ```props
+ * Top :- Position the AppBar at the top.
+ * Bottom :- Position the AppBar at the bottom.
+ * ```
  */
 export declare type AppBarPosition = 'Top' | 'Bottom';
 /**
  * Specifies the color of the AppBar component.
- *
- * * `Light` - Specifies the AppBar in light color.
- * * `Dark` - Specifies the AppBar in dark color.
- * * `Primary` - Specifies the AppBar in a primary color.
- * * `Inherit` - Inherit color from parent for AppBar. AppBar background and colors are inherited from its parent element.
+ * ```props
+ * Light :- Specifies the AppBar in light color.
+ * Dark :- Specifies the AppBar in dark color.
+ * Primary :- Specifies the AppBar in a primary color.
+ * Inherit :- Inherit color from parent for AppBar. AppBar background and colors are inherited from its parent element.
+ * ```
  */
 export declare type AppBarColor = 'Light' | 'Dark' | 'Primary' | 'Inherit';
 /**
@@ -32,17 +35,17 @@ export declare type AppBarColor = 'Light' | 'Dark' | 'Primary' | 'Inherit';
 export declare class AppBar extends Component<HTMLElement> implements INotifyPropertyChanged {
     /**
      * Specifies the mode of the AppBar that defines the AppBar height. The possible values for this property are as follows:
-     * * Regular
-     * * Prominent
-     * * Dense
+     * * `Regular`: Specifies default height for the AppBar.
+     * * `Prominent`: Specifies longer height for the AppBar to show the longer titles and images, or to provide a stronger presence.
+     * * `Dense`: Specifies compressed (short) height for the AppBar to accommodate all the app bar content in a denser layout.
      *
      * @default 'Regular'
      */
     mode: AppBarMode;
     /**
      * Specifies the position of the AppBar. The possible values for this property are as follows:
-     * * Top
-     * * Bottom
+     * * `Top`: Position the AppBar at the top.
+     * * `Bottom`: Position the AppBar at the bottom.
      *
      * @default 'Top'
      */
@@ -68,10 +71,10 @@ export declare class AppBar extends Component<HTMLElement> implements INotifyPro
     htmlAttributes: Record<string, string>;
     /**
      * Specifies the color mode that defines the color of the AppBar component. The possible values for this property are as follows:
-     * * Light
-     * * Dark
-     * * Primary
-     * * Inherit
+     * * `Light`: Specifies the AppBar in light color.
+     * * `Dark`: Specifies the AppBar in dark color.
+     * * `Primary`: Specifies the AppBar in a primary color.
+     * * `Inherit`: Inherit color from parent for AppBar. AppBar background and colors are inherited from its parent element.
      *
      * @default 'Light'
      */

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

@@ -80,9 +80,11 @@ export interface BreadcrumbModel extends ComponentModel{
      * - Scroll: Shows an HTML scroll bar when the Breadcrumb’s width exceeds the container space.
      * - None: Shows all the items on a single line.
      *
-     * @default 'Menu'
+     * @isenumeration true
+     * @default BreadcrumbOverflowMode.Menu
+     * @asptype BreadcrumbOverflowMode
      */
-    overflowMode?: BreadcrumbOverflowMode;
+    overflowMode?: string | BreadcrumbOverflowMode;
 
     /**
      * Defines class/multiple classes separated by a space in the Breadcrumb element.

package/src/breadcrumb/breadcrumb.d.ts

@@ -3,7 +3,34 @@ import { BreadcrumbModel, BreadcrumbItemModel } from './breadcrumb-model';
 /**
  * Defines the Breadcrumb overflow modes.
  */
-export declare type BreadcrumbOverflowMode = 'Hidden' | 'Collapsed' | 'Menu' | 'Wrap' | 'Scroll' | 'None';
+export declare enum BreadcrumbOverflowMode {
+    /**
+     * Hidden mode shows the maximum number of items possible in the container space and hides the remaining items.
+     * Clicking on a previous item will make the hidden item visible.
+     */
+    Hidden = "Hidden",
+    /**
+     * Collapsed mode shows the first and last Breadcrumb items and hides the remaining items with a collapsed icon.
+     * When the collapsed icon is clicked, all items become visible and navigable.
+     */
+    Collapsed = "Collapsed",
+    /**
+     * Menu mode shows the number of Breadcrumb items that can be accommodated within the container space and creates a submenu with the remaining items.
+     */
+    Menu = "Menu",
+    /**
+     * Wrap mode wraps the items to multiple lines when the Breadcrumb’s width exceeds the container space.
+     */
+    Wrap = "Wrap",
+    /**
+     * Scroll mode shows an HTML scroll bar when the Breadcrumb’s width exceeds the container space.
+     */
+    Scroll = "Scroll",
+    /**
+     * None mode shows all the items in a single line.
+     */
+    None = "None"
+}
 export declare class BreadcrumbItem extends ChildProperty<BreadcrumbItem> {
     /**
      * Specifies the text content of the Breadcrumb item.
@@ -120,9 +147,11 @@ export declare class Breadcrumb extends Component<HTMLElement> implements INotif
      * - Scroll: Shows an HTML scroll bar when the Breadcrumb’s width exceeds the container space.
      * - None: Shows all the items on a single line.
      *
-     * @default 'Menu'
+     * @isenumeration true
+     * @default BreadcrumbOverflowMode.Menu
+     * @asptype BreadcrumbOverflowMode
      */
-    overflowMode: BreadcrumbOverflowMode;
+    overflowMode: string | BreadcrumbOverflowMode;
     /**
      * Defines class/multiple classes separated by a space in the Breadcrumb element.
      *

package/src/breadcrumb/breadcrumb.js

@@ -32,6 +32,38 @@ var TABINDEX = 'tabindex';
 var DISABLEDCLASS = 'e-disabled';
 var ARIADISABLED = 'aria-disabled';
 var DOT = '.';
+/**
+ * Defines the Breadcrumb overflow modes.
+ */
+export var BreadcrumbOverflowMode;
+(function (BreadcrumbOverflowMode) {
+    /**
+     * Hidden mode shows the maximum number of items possible in the container space and hides the remaining items.
+     * Clicking on a previous item will make the hidden item visible.
+     */
+    BreadcrumbOverflowMode["Hidden"] = "Hidden";
+    /**
+     * Collapsed mode shows the first and last Breadcrumb items and hides the remaining items with a collapsed icon.
+     * When the collapsed icon is clicked, all items become visible and navigable.
+     */
+    BreadcrumbOverflowMode["Collapsed"] = "Collapsed";
+    /**
+     * Menu mode shows the number of Breadcrumb items that can be accommodated within the container space and creates a submenu with the remaining items.
+     */
+    BreadcrumbOverflowMode["Menu"] = "Menu";
+    /**
+     * Wrap mode wraps the items to multiple lines when the Breadcrumb’s width exceeds the container space.
+     */
+    BreadcrumbOverflowMode["Wrap"] = "Wrap";
+    /**
+     * Scroll mode shows an HTML scroll bar when the Breadcrumb’s width exceeds the container space.
+     */
+    BreadcrumbOverflowMode["Scroll"] = "Scroll";
+    /**
+     * None mode shows all the items in a single line.
+     */
+    BreadcrumbOverflowMode["None"] = "None";
+})(BreadcrumbOverflowMode || (BreadcrumbOverflowMode = {}));
 var BreadcrumbItem = /** @class */ (function (_super) {
     __extends(BreadcrumbItem, _super);
     function BreadcrumbItem() {

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

@@ -51,10 +51,10 @@ export interface CarouselModel extends ComponentModel{
 
     /**
      *  Specifies the type of animation effects. The possible values for this property as follows
-     *  * None
-     *  * Slide
-     *  * Fade
-     *  * Custom
+    * * `None`: The carousel item transition happens without animation.
+    * * `Slide`: The carousel item transition happens with slide animation.
+    * * `Fade`: The Carousel item transition happens with fade animation.
+    * * `Custom`: The Carousel item transition happens with custom animation.
      *
      *  @default 'Slide'
      */
@@ -182,9 +182,9 @@ export interface CarouselModel extends ComponentModel{
 
     /**
      * Defines how to show the previous, next and play pause buttons visibility. The possible values for this property as follows
-     * * Hidden
-     * * Visible
-     * * VisibleOnHover
+     * * `Hidden`: Navigation buttons are hidden.
+     * * `Visible`: Navigation buttons are visible.
+     * * `VisibleOnHover`: Navigation buttons are visible only when we hover the carousel.
      *
      * @default 'Visible'
      */

package/src/carousel/carousel.d.ts

@@ -4,28 +4,31 @@ import { BaseEventArgs } from '@syncfusion/ej2-base';
 import { CarouselModel, CarouselItemModel } from './carousel-model';
 /**
  * Specifies the direction of previous/next button navigations in carousel.
- *
- * * `Previous` - To determine the previous direction of carousel item transition.
- * * `Next` - To determine the next direction of carousel item transition.
+ * ```props
+ * Previous :- To determine the previous direction of carousel item transition.
+ * Next :- To determine the next direction of carousel item transition.
+ * ```
  */
 export declare type CarouselSlideDirection = 'Previous' | 'Next';
 /**
  * Specifies the state of navigation buttons displayed in carousel.
- *
- * * `Hidden` - Navigation buttons are hidden.
- * * `Visible` - Navigation buttons are visible.
- * * `VisibleOnHover` - Navigation buttons are visible only when we hover the carousel.
+ * ```props
+ * Hidden :- Navigation buttons are hidden.
+ * Visible :- Navigation buttons are visible.
+ * VisibleOnHover :- Navigation buttons are visible only when we hover the carousel.
+ * ```
  */
 export declare type CarouselButtonVisibility = 'Hidden' | 'Visible' | 'VisibleOnHover';
 /**
  * Specifies the animation effects of carousel slide.
- *
- * * `None` - The carousel item transition happens without animation.
- * * `Slide` - The carousel item transition happens with slide animation.
- * * `Fade` - The Carousel item transition happens with fade animation.
- * * `Custom` - The Carousel item transition happens with custom animation.
+ * ```props
+ * None :- The carousel item transition happens without animation.
+ * Slide :- The carousel item transition happens with slide animation.
+ * Fade :- The Carousel item transition happens with fade animation.
+ * Custom :- The Carousel item transition happens with custom animation.
+ * ```
  */
-export declare type CarouselAnimationEffect = 'None' | 'Fade' | 'Slide' | 'Custom';
+export declare type CarouselAnimationEffect = 'None' | 'Slide' | 'Fade' | 'Custom';
 /** An interface that holds details when changing the slide. */
 export interface SlideChangingEventArgs extends BaseEventArgs {
     /** Specifies the index of current slide. */
@@ -101,10 +104,10 @@ export declare class Carousel extends Component<HTMLElement> implements INotifyP
     items: CarouselItemModel[];
     /**
      *  Specifies the type of animation effects. The possible values for this property as follows
-     *  * None
-     *  * Slide
-     *  * Fade
-     *  * Custom
+    * * `None`: The carousel item transition happens without animation.
+    * * `Slide`: The carousel item transition happens with slide animation.
+    * * `Fade`: The Carousel item transition happens with fade animation.
+    * * `Custom`: The Carousel item transition happens with custom animation.
      *
      *  @default 'Slide'
      */
@@ -214,9 +217,9 @@ export declare class Carousel extends Component<HTMLElement> implements INotifyP
     showIndicators: boolean;
     /**
      * Defines how to show the previous, next and play pause buttons visibility. The possible values for this property as follows
-     * * Hidden
-     * * Visible
-     * * VisibleOnHover
+     * * `Hidden`: Navigation buttons are hidden.
+     * * `Visible`: Navigation buttons are visible.
+     * * `VisibleOnHover`: Navigation buttons are visible only when we hover the carousel.
      *
      * @default 'Visible'
      */
@@ -262,6 +265,7 @@ export declare class Carousel extends Component<HTMLElement> implements INotifyP
     private reRenderSlides;
     private initialize;
     private renderSlides;
+    private getTranslateX;
     private renderSlide;
     private renderNavigators;
     private renderNavigatorButton;

package/src/carousel/carousel.js

@@ -130,6 +130,7 @@ var Carousel = /** @class */ (function (_super) {
     };
     Carousel.prototype.onPropertyChanged = function (newProp, oldProp) {
         var target;
+        var rtlElement;
         for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
             var prop = _a[_i];
             switch (prop) {
@@ -166,11 +167,19 @@ var Carousel = /** @class */ (function (_super) {
                     }
                     break;
                 case 'enableRtl':
+                    rtlElement = [].slice.call(this.element.querySelectorAll("." + CLS_PREV_BUTTON + ",\n                ." + CLS_NEXT_BUTTON + ", ." + CLS_PLAY_BUTTON));
+                    rtlElement.push(this.element);
                     if (this.enableRtl) {
-                        addClass([this.element], CLS_RTL);
+                        addClass(rtlElement, CLS_RTL);
                     }
                     else {
-                        removeClass([this.element], CLS_RTL);
+                        removeClass(rtlElement, CLS_RTL);
+                    }
+                    if (this.partialVisible) {
+                        var itemsContainer = this.element.querySelector("." + CLS_ITEMS);
+                        var cloneCount = this.loop ? 2 : 0;
+                        var slideWidth = itemsContainer.firstElementChild.clientWidth;
+                        itemsContainer.style.transform = this.getTranslateX(slideWidth, this.selectedIndex + cloneCount);
                     }
                     break;
                 case 'buttonsVisibility':
@@ -318,12 +327,17 @@ var Carousel = /** @class */ (function (_super) {
             var slideWidth = itemsContainer.firstElementChild.clientWidth;
             var cloneCount = this.loop ? 2 : 0;
             itemsContainer.style.transitionProperty = 'none';
-            itemsContainer.style.transform = "translateX(" + -(slideWidth) * (this.selectedIndex + cloneCount) + "px)";
+            itemsContainer.style.transform = this.getTranslateX(slideWidth, this.selectedIndex + cloneCount);
         }
         this.autoSlide();
         this.renderTouchActions();
         this.renderKeyboardActions();
     };
+    Carousel.prototype.getTranslateX = function (slideWidth, count) {
+        if (count === void 0) { count = 1; }
+        return this.enableRtl ? "translateX(" + (slideWidth) * (count) + "px)" :
+            "translateX(" + -(slideWidth) * (count) + "px)";
+    };
     Carousel.prototype.renderSlide = function (item, itemTemplate, index, container, isClone) {
         if (isClone === void 0) { isClone = false; }
         var itemEle = this.createElement('div', {
@@ -376,7 +390,7 @@ var Carousel = /** @class */ (function (_super) {
         }
         else {
             var button = this.createElement('button', {
-                attrs: { 'aria-label': this.localeObj.getConstant(direction === 'Previous' ? 'previousSlide' : 'nextSlide') }
+                attrs: { 'aria-label': this.localeObj.getConstant(direction === 'Previous' ? 'previousSlide' : 'nextSlide'), 'type': 'button' }
             });
             var buttonObj = new Button({
                 cssClass: CLS_FLAT + ' ' + CLS_ROUND + ' ' + (direction === 'Previous' ? CLS_PREV_BUTTON : CLS_NEXT_BUTTON),
@@ -405,7 +419,7 @@ var Carousel = /** @class */ (function (_super) {
         }
         else {
             var playButton = this.createElement('button', {
-                attrs: { 'aria-label': this.localeObj.getConstant(this.autoPlay ? 'pauseSlideTransition' : 'playSlideTransition') }
+                attrs: { 'aria-label': this.localeObj.getConstant(this.autoPlay ? 'pauseSlideTransition' : 'playSlideTransition'), 'type': 'button' }
             });
             var isLastSlide = this.selectedIndex === this.slideItems.length - 1 && !this.loop;
             var buttonObj = new Button({
@@ -449,7 +463,7 @@ var Carousel = /** @class */ (function (_super) {
                     append(template, indicatorBar);
                 }
                 else {
-                    var indicator = _this.createElement('button', { className: CLS_INDICATOR });
+                    var indicator = _this.createElement('button', { className: CLS_INDICATOR, attrs: { 'type': 'button' } });
                     indicatorBar.appendChild(indicator);
                     indicator.appendChild(_this.createElement('div', {
                         attrs: {
@@ -603,17 +617,17 @@ var Carousel = /** @class */ (function (_super) {
                 container.style.transitionProperty = 'transform';
                 if (_this.loop) {
                     if (_this.slideChangedEventArgs.currentIndex === 0 && _this.slideChangedEventArgs.slideDirection === 'Next') {
-                        container.style.transform = "translateX(" + -(slideWidth) * (allSlides.length + 2) + "px)";
+                        container.style.transform = _this.getTranslateX(slideWidth, allSlides.length + 2);
                     }
                     else if (_this.slideChangedEventArgs.currentIndex === _this.slideItems.length - 1 && _this.slideChangedEventArgs.slideDirection === 'Previous') {
-                        container.style.transform = "translateX(" + -(slideWidth) + "px)";
+                        container.style.transform = _this.getTranslateX(slideWidth);
                     }
                     else {
-                        container.style.transform = "translateX(" + -(slideWidth) * (currentIndex + 2) + "px)";
+                        container.style.transform = _this.getTranslateX(slideWidth, currentIndex + 2);
                     }
                 }
                 else {
-                    container.style.transform = "translateX(" + -(slideWidth) * (currentIndex) + "px)";
+                    container.style.transform = _this.getTranslateX(slideWidth, currentIndex);
                 }
             }
             if (_this.animationEffect === 'Slide') {
@@ -656,7 +670,7 @@ var Carousel = /** @class */ (function (_super) {
                 var container = this.element.querySelector('.' + CLS_ITEMS);
                 var slideWidth = this.slideChangedEventArgs.currentSlide.clientWidth;
                 container.style.transitionProperty = 'none';
-                container.style.transform = "translate(" + -(slideWidth) * (this.slideChangedEventArgs.currentIndex + 2) + "px)";
+                container.style.transform = this.getTranslateX(slideWidth, this.slideChangedEventArgs.currentIndex + 2);
             }
             addClass([this.slideChangedEventArgs.currentSlide], CLS_ACTIVE);
             removeClass([this.slideChangedEventArgs.previousSlide], CLS_ACTIVE);

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

@@ -2,11 +2,22 @@ import { Component, ChildProperty, INotifyPropertyChanged } from '@syncfusion/ej
 import { EmitType, BaseEventArgs } from '@syncfusion/ej2-base';
 import { MenuItemModel, MenuBaseModel, FieldSettingsModel, MenuAnimationSettingsModel } from './menu-base-model';
 /**
- * Sub menu open type
+ * Defines the different types of options available for opening a submenu.
+ * ```props
+ * Auto - The submenu opens automatically when clicked or hovered over, depending on the 'showItemOnClick' property.
+ * Click - The submenu opens when clicked the menu item.
+ * Hover - The submenu opens when the user hovers over the menu item with the mouse cursor.
+ * ```
  */
 export declare type MenuOpenType = 'Auto' | 'Click' | 'Hover';
 /**
- * Menu animation effects
+ * Defines the different types of animation effects available for opening the sub menu.
+ * ```props
+ * None - The sub menu is opened / closed without any animation effect.
+ * SlideDown - The submenu is opened / closed with a slide down effect.
+ * ZoomIn - The submenu is opened / closed with a zoom in effect.
+ * FadeIn - The sub menu is opened / closed with a fade in effect.
+ * ```
  */
 export declare type MenuEffect = 'None' | 'SlideDown' | 'ZoomIn' | 'FadeIn';
 /**

package/src/menu/menu.d.ts

@@ -4,7 +4,11 @@ import { MenuBase } from '../common/menu-base';
 import { FieldSettingsModel } from '../common/menu-base-model';
 import { MenuModel } from './menu-model';
 /**
- * Specifies the option for orientation mode of Menu. By default, component rendered in Horizontal orientation mode.
+ * Defines the different types of orientation option available in the Menu.
+ * ```props
+ * Horizontal - It renders the menu in a horizontal orientation mode.
+ * Vertical - It renders the menu in a vertical orientation mode.
+ * ```
  */
 export declare type Orientation = 'Horizontal' | 'Vertical';
 /**