@syncfusion/ej2-navigations 16.4.45 → 16.4.52-46585

package/src/tab/tab.d.ts

@@ -6,13 +6,35 @@ 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. */
 export interface SelectEventArgs extends BaseEventArgs {
     /** Defines the previous Tab item element. */
     previousItem: HTMLElement;
@@ -28,7 +50,10 @@ export interface SelectEventArgs extends BaseEventArgs {
     cancel?: boolean;
     /** Defines the selected content. */
     selectedContent: HTMLElement;
+    /** Determines whether the event is triggered via user interaction or programmatic way. True, if the event is triggered by user interaction. */
+    isInteracted?: boolean;
 }
+/** An interface that holds options to control the selecting item action. */
 export interface SelectingEventArgs extends SelectEventArgs {
     /** Defines the selecting Tab item element. */
     selectingItem: HTMLElement;
@@ -36,39 +61,79 @@ export interface SelectingEventArgs extends SelectEventArgs {
     selectingIndex: number;
     /** Defines the selecting Tab item content. */
     selectingContent: HTMLElement;
+    /** Defines the type of the event. */
+    event?: Event;
 }
+/** An interface that holds options to control the removing and removed item action. */
 export interface RemoveEventArgs extends BaseEventArgs {
     /** Defines the removed Tab item element. */
     removedItem: HTMLElement;
     /** Defines the removed Tab item index. */
     removedIndex: number;
+    /** Defines the prevent action. */
+    cancel?: boolean;
 }
+/** An interface that holds options to control the adding and added item action. */
+export interface AddEventArgs extends BaseEventArgs {
+    /** Defines the added Tab item element */
+    addedItems: TabItemModel[];
+    /** Defines the prevent action. */
+    cancel?: boolean;
+}
+/** An interface that holds option to control the dragging and dragged item action. */
+export interface DragEventArgs extends BaseEventArgs {
+    /** Defines the current dragged Tab item. */
+    draggedItem: HTMLElement;
+    /** Defines the dropped Tab item. */
+    droppedItem: HTMLElement;
+    /** defines the Dragged Tab item index. */
+    index: number;
+    /** Return the actual event. */
+    event: MouseEvent;
+    /** Return the target element */
+    target: HTMLElement;
+    /** Return the clone element */
+    clonedElement: HTMLElement;
+    /** Defines the prevent action. */
+    cancel?: boolean;
+}
+/**
+ * Objects used for configuring the Tab selecting item action properties.
+ */
 export declare class TabActionSettings extends ChildProperty<TabActionSettings> {
     /**
      * Specifies the animation effect for displaying Tab content.
-     * @default : 'SlideLeftIn'
+     *
+     * @default 'SlideLeftIn'
      * @aspType string
      */
     effect: 'None' | Effect;
     /**
      * Specifies the time duration to transform content.
-     * @default : 600
+     *
+     * @default 600
      */
     duration: number;
     /**
      * Specifies easing effect applied while transforming content.
-     * @default : 'ease'
+     *
+     * @default 'ease'
      */
     easing: string;
 }
+/**
+ * Objects used for configuring the Tab animation properties.
+ */
 export declare class TabAnimationSettings extends ChildProperty<TabAnimationSettings> {
     /**
      * Specifies the animation to appear while moving to previous Tab content.
+     *
      * @default { effect: 'SlideLeftIn', duration: 600, easing: 'ease' }
      */
     previous: TabActionSettingsModel;
     /**
      * Specifies the animation to appear while moving to next Tab content.
+     *
      * @default { effect: 'SlideRightIn', duration: 600, easing: 'ease' }
      */
     next: TabActionSettingsModel;
@@ -79,21 +144,24 @@ export declare class TabAnimationSettings extends ChildProperty<TabAnimationSett
 export declare class Header extends ChildProperty<Header> {
     /**
      * Specifies the display text of the Tab item header.
+     *
      * @default ''
      */
     text: string | HTMLElement;
     /**
      * Specifies the icon class that is used to render an icon in the Tab header.
+     *
      * @default ''
      */
     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'
      */
     iconPosition: string;
@@ -104,24 +172,54 @@ export declare class Header extends ChildProperty<Header> {
 export declare class TabItem extends ChildProperty<TabItem> {
     /**
      * The object used for configuring the Tab item header properties.
+     *
      * @default {}
      */
     header: HeaderModel;
+    /**
+     * Specifies the header text of Tab item.
+     *
+     * @default null
+     */
+    headerTemplate: string;
     /**
      * Specifies the content of Tab item, that is displayed when concern item header is selected.
+     *
      * @default ''
      */
     content: string | HTMLElement;
     /**
      * Sets the CSS classes to the Tab item to customize its styles.
+     *
      * @default ''
      */
     cssClass: string;
     /**
      * Sets true to disable user interactions of the Tab item.
+     *
      * @default false
      */
     disabled: boolean;
+    /**
+     * Sets false to hide the Tab item.
+     *
+     * @default true
+     */
+    visible: boolean;
+    /**
+     * Sets unique ID to Tab item.
+     *
+     * @default null
+     */
+    id: string;
+    /**
+     * Specifies the tab order of the Tabs items. When positive values assigned, it allows to switch focus to the next/previous tabs items with Tab/ShiftTab keys.
+     * By default, user can able to switch between items only via arrow keys.
+     * If the value is set to 0 for all tabs items, then tab switches based on element order.
+     *
+     * @default -1
+     */
+    tabIndex: number;
 }
 /**
  * Tab is a content panel to show multiple contents in a single space, one at a time.
@@ -138,6 +236,7 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
     private hdrEle;
     private cntEle;
     private tbObj;
+    tabId: string;
     private tbItems;
     private tbItem;
     private tbPop;
@@ -158,11 +257,10 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
     private keyModule;
     private tabKeyModule;
     private touchModule;
-    private animateOptions;
-    private animObj;
     private maxHeight;
     private title;
     private initRender;
+    private isInteracted;
     private prevActiveEle;
     private lastIndex;
     private isSwipeed;
@@ -175,6 +273,12 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
     private selectedID;
     private selectingID;
     private isIconAlone;
+    private dragItem;
+    private cloneElement;
+    private droppedIndex;
+    private draggingItems;
+    private draggableItems;
+    private tbId;
     private resizeContext;
     /**
      * Contains the keyboard configuration of the Tab.
@@ -191,22 +295,26 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
      *   });
      *   tabObj.appendTo('#tab');
      * ```
+     *
      * @default []
      */
     items: TabItemModel[];
     /**
      * Specifies the width of the Tab component. Default, Tab width sets based on the width of its parent.
+     *
      * @default '100%'
      */
     width: string | number;
     /**
      * Specifies the height of the Tab component. By default, Tab height is set based on the height of its parent.
      * To use height property, heightAdjustMode must be set to 'None'.
+     *
      * @default 'auto'
      */
     height: string | number;
     /**
      * Sets the CSS classes to root element of the Tab that helps to customize component styles.
+     *
      * @default ''
      */
     cssClass: string;
@@ -222,121 +330,198 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
      *   });
      *   tabObj.appendTo('#tab');
      * ```
+     *
      * @default 0
      */
     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'
      */
     heightAdjustMode: HeightStyles;
     /**
      * 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'
      */
     overflowMode: OverflowMode;
     /**
-     * Specifies the direction of the Tab. For the culture like Arabic, direction can be switched as right-to-left.
-     * @default false
+     * Specifies the modes for Tab content.
+     * The possible modes are:
+     * * `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'
      */
-    enableRtl: boolean;
+    protected loadOn: ContentLoad;
     /**
      * Enable or disable persisting component's state between page reloads.
      * If enabled, following list of states will be persisted.
      * 1. selectedItem
-     * @default false.
+     *
+     * @default false
      */
     enablePersistence: boolean;
+    /**
+     * Defines whether to allow the cross-scripting site or not.
+     *
+     * @default false
+     */
+    enableHtmlSanitizer: boolean;
     /**
      * Specifies whether to show the close button for header items to remove the item from the Tab.
+     *
      * @default false
      */
     showCloseButton: boolean;
+    /**
+     * Determines whether to re-order tab items to show active tab item in the header area or popup when OverflowMode is Popup.
+     *  True, if active tab item should be visible in header area instead of pop-up. The default value is true.
+     *
+     * @default true
+     */
+    reorderActiveTab: boolean;
+    /**
+     * Specifies the scrolling distance in scroller.
+     *
+     * @default null
+     */
+    scrollStep: number;
+    /**
+     * Defines the area in which the draggable element movement will be occurring. Outside that area will be restricted
+     * for the draggable element movement. By default, the draggable element movement occurs in the toolbar.
+     * @default null
+     */
+    dragArea: string;
+    /**
+     * Sets true to allow drag and drop the Tab items
+     * @default false
+     */
+    allowDragAndDrop: boolean;
     /**
      * Specifies the animation configuration settings while showing the content of the Tab.
+     *
      * @default
      * { previous: { effect: 'SlideLeftIn', duration: 600, easing: 'ease' },
-     *   next: { effect: 'SlideRightIn', duration: 600, easing: 'ease' } }
+     * next: { effect: 'SlideRightIn', duration: 600, easing: 'ease' } }
      */
     animation: TabAnimationSettingsModel;
     /**
      * The event will be fired once the component rendering is completed.
+     *
      * @event
      */
     created: EmitType<Event>;
     /**
-     * The event will be fired before adding the item to the Tab.
+     * The event will be fired before adding the item to the Tab.
+     *
      * @event
      */
-    adding: EmitType<Event>;
+    adding: EmitType<AddEventArgs>;
     /**
-     * The event will be fired after adding the item to the Tab.
+     * The event will be fired after adding the item to the Tab.
+     *
      * @event
      */
-    added: EmitType<Event>;
+    added: EmitType<AddEventArgs>;
     /**
-     * The event will be fired before the item gets selected.
+     * The event will be fired before the item gets selected.
+     *
      * @event
      */
     selecting: EmitType<SelectingEventArgs>;
     /**
-     * The event will be fired after the item gets selected.
+     * The event will be fired after the item gets selected.
+     *
      * @event
      */
     selected: EmitType<SelectEventArgs>;
     /**
-     * The event will be fired before removing the item from the Tab.
+     * The event will be fired before removing the item from the Tab.
+     *
      * @event
      */
     removing: EmitType<RemoveEventArgs>;
     /**
-     * The event will be fired after removing the item from the Tab.
+     * The event will be fired after removing the item from the Tab.
+     *
      * @event
      */
     removed: EmitType<RemoveEventArgs>;
+    /**
+     * The event will be fired before dragging the item from Tab
+     * @event
+     */
+    onDragStart: EmitType<DragEventArgs>;
+    /**
+     * The event will be fired while dragging the Tab item
+     * @event
+     */
+    dragging: EmitType<DragEventArgs>;
+    /**
+     * The event will be fired after dropping the Tab item
+     * @event
+     */
+    dragged: EmitType<DragEventArgs>;
     /**
      * The event will be fired when the component gets destroyed.
+     *
      * @event
      */
     destroyed: EmitType<Event>;
     /**
      * Removes the component from the DOM and detaches all its related event handlers, attributes and classes.
-     * @returns void
+     *
+     * @returns {void}
      */
     destroy(): void;
+    /**
+     * Refresh the tab component
+     *
+     * @returns {void}
+     */
+    refresh(): void;
     /**
      * Initialize component
+     *
      * @private
+     * @returns {void}
      */
     protected preRender(): void;
     /**
      * Initializes a new instance of the Tab class.
-     * @param options  - Specifies Tab model properties as options.
-     * @param element  - Specifies the element that is rendered as a Tab.
+     *
+     * @param {TabModel} options  - Specifies Tab model properties as options.
+     * @param {string | HTMLElement} element  - Specifies the element that is rendered as a Tab.
      */
     constructor(options?: TabModel, element?: string | HTMLElement);
     /**
      * Initialize the component rendering
+     *
      * @private
+     * @returns {void}
      */
     protected render(): void;
     private renderContainer;
@@ -347,12 +532,12 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
     private removeActiveClass;
     private checkPopupOverflow;
     private popupHandler;
-    private updateOrientationAttribute;
     private setCloseButton;
     private prevCtnAnimation;
     private triggerPrevAnimation;
     private triggerAnimation;
     private keyPressed;
+    private getTabHeader;
     private getEleIndex;
     private extIndex;
     private expTemplateContent;
@@ -366,6 +551,8 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
     private addVerticalClass;
     private updatePopAnimationConfig;
     private changeOrientation;
+    private focusItem;
+    private changeToolbarOrientation;
     private setOrientation;
     private setCssClass;
     private setContentHeight;
@@ -376,75 +563,113 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
     private setRTL;
     private refreshActiveBorder;
     private showPopup;
+    private bindDraggable;
     private wireEvents;
     private unWireEvents;
     private clickHandler;
     private swipeHandler;
     private spaceKeyDown;
     private keyHandler;
-    private refreshActElePosition;
     private refreshItemVisibility;
+    private getIndexFromEle;
     private hoverHandler;
     private evalOnPropertyChangeItems;
+    private initializeDrag;
+    private helper;
+    private itemDragStart;
+    private dragAction;
+    private itemDragStop;
     /**
      * Enables or disables the specified Tab item. On passing value as `false`, the item will be disabled.
-     * @param  {number} index - Index value of target Tab item.
-     * @param  {boolean} value - Boolean value that determines whether the command should be enabled or disabled.
+     *
+     * @param {number} index - Index value of target Tab item.
+     * @param {boolean} value - Boolean value that determines whether the command should be enabled or disabled.
      * By default, isEnable is true.
-     * @returns void.
+     * @returns {void}.
      */
     enableTab(index: number, value: boolean): void;
     /**
      * Adds new items to the Tab that accepts an array as Tab items.
-     * @param  {TabItemsModel[]} items - An array of item that is added to the Tab.
-     * @param  {number} index - Number value that determines where the items to be added. By default, index is 0.
-     * @returns void.
+     *
+     * @param {TabItemModel[]} items - An array of item that is added to the Tab.
+     * @param {number} index - Number value that determines where the items to be added. By default, index is 0.
+     * @returns {void}.
      */
     addTab(items: TabItemModel[], index?: number): void;
+    private addingTabContent;
     /**
      * Removes the items in the Tab from the specified index.
-     * @param  {number} index - Index of target item that is going to be removed.
-     * @returns void.
+     *
+     * @param {number} index - Index of target item that is going to be removed.
+     * @returns {void}.
      */
     removeTab(index: number): void;
     /**
      * Shows or hides the Tab that is in the specified index.
-     * @param  {number} index - Index value of target item.
-     * @param  {boolean} value - Based on this Boolean value, item will be hide (false) or show (true). By default, value is true.
-     * @returns void.
+     *
+     * @param {number} index - Index value of target item.
+     * @param {boolean} value - Based on this Boolean value, item will be hide (false) or show (true). By default, value is true.
+     * @returns {void}.
      */
     hideTab(index: number, value?: boolean): void;
+    private selectTab;
     /**
      * Specifies the index or HTMLElement to select an item from the Tab.
-     * @param  {number | HTMLElement} args - Index or DOM element is used for selecting an item from the Tab.
-     * @returns void.
+     *
+     * @param {number | HTMLElement} args - Index or DOM element is used for selecting an item from the Tab.
+     * @param {Event} event - An event which takes place in DOM.
+     * @returns {void}
+     */
+    select(args: number | HTEle, event?: Event): void;
+    private selectingContent;
+    /**
+     * Gets the item index from the Tab.
+     *
+     * @param  {string} tabItemId - Item ID is used for getting index from the Tab.
+     * @returns {number} - It returns item index.
      */
-    select(args: number | HTEle): void;
+    getItemIndex(tabItemId: string): number;
     /**
      * Specifies the value to disable/enable the Tab component.
      * When set to `true`, the component will be disabled.
+     *
      * @param  {boolean} value - Based on this Boolean value, Tab will be enabled (false) or disabled (true).
-     * @returns void.
+     * @returns {void}.
      */
     disable(value: boolean): void;
     /**
      * Get the properties to be maintained in the persisted state.
-     * @returns string
+     *
+     * @returns {string} - It returns the persisted state.
      */
     protected getPersistData(): string;
     /**
      * Returns the current module name.
-     * @returns string
+     *
+     * @returns {string} - It returns the current module name.
      * @private
      */
     protected getModuleName(): string;
     /**
      * Gets called when the model property changes.The data that describes the old and new values of the property that changed.
-     * @param  {TabModel} newProp
-     * @param  {TabModel} oldProp
-     * @returns void
+     *
+     * @param  {TabModel} newProp - It contains the new value of data.
+     * @param  {TabModel} oldProp - It contains the old value of data.
+     * @returns {void}
      * @private
      */
     onPropertyChanged(newProp: TabModel, oldProp: TabModel): void;
+    /**
+     * To refresh the active tab contents.
+     *
+     * @returns {void}
+     */
+    refreshActiveTab(): void;
+    /**
+     * To refresh the active tab indicator.
+     *
+     * @returns {void}
+     */
+    refreshActiveTabBorder(): void;
 }
 export {};