@syncfusion/ej2-navigations 31.1.17 → 31.1.20

package/dist/ts/tab/tab.d.ts

@@ -1,715 +0,0 @@
-import { Component, EmitType } from '@syncfusion/ej2-base';
-import { INotifyPropertyChanged, ChildProperty } from '@syncfusion/ej2-base';
-import { Effect } from '@syncfusion/ej2-base';
-import { BaseEventArgs } from '@syncfusion/ej2-base';
-import { OverflowMode } from '../toolbar/toolbar';
-import { TabModel, TabItemModel, HeaderModel, TabActionSettingsModel, TabAnimationSettingsModel } from './tab-model';
-declare type HTEle = HTMLElement;
-/**
- * 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';
-/**
- * Enables or disables the tab swiping action through Touch and Mouse.
- * - `Both`: Enables swiping for both touch and mouse input.
- * - `Touch`: Enables swiping only for touch input.
- * - `Mouse`: Enables swiping only for mouse input.
- * - `None`: Disables swiping for both touch and mouse input.
- */
-export declare type TabSwipeMode = 'Both' | 'Touch' | 'Mouse' | 'None';
-/**
- * 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 :- Only the content of the selected tab is loaded and available in the DOM, and it will be replaced with the corresponding content if the tab is selected dynamically.
- * 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;
-    /** Defines the previous Tab item index. */
-    previousIndex: number;
-    /** Defines the selected Tab item element. */
-    selectedItem: HTMLElement;
-    /** Defines the selected Tab item index. */
-    selectedIndex: number;
-    /** Defines the content selection done through swiping. */
-    isSwiped: boolean;
-    /** Defines the prevent action. */
-    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;
-    /** Determines whether the Tab item needs to focus or not after it is selected */
-    preventFocus?: 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;
-    /** Defines the selecting Tab item index. */
-    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'
-     * @aspType string
-     */
-    effect: 'None' | Effect;
-    /**
-     * Specifies the time duration to transform content.
-     *
-     * @default 600
-     */
-    duration: number;
-    /**
-     * Specifies easing effect applied while transforming content.
-     *
-     * @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;
-}
-/**
- * Objects used for configuring the Tab item header properties.
- */
-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 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;
-}
-/**
- * An array of object that is used to configure the Tab.
- */
-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
-     * @angularType string | object
-     * @reactType string | function | JSX.Element
-     * @vueType string | function
-     * @aspType string
-     */
-    headerTemplate: string | Function;
-    /**
-     * Specifies the content of Tab item, that is displayed when concern item header is selected.
-     *
-     * @default ''
-     * @angularType string | object
-     * @reactType string | function | JSX.Element
-     * @vueType string | function
-     * @aspType string
-     */
-    content: string | HTMLElement | Function;
-    /**
-     * 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.
- * Each Tab item has an associated content, that will be displayed based on the active Tab header item.
- * ```html
- * <div id="tab"></div>
- * <script>
- *   var tabObj = new Tab();
- *   tab.appendTo("#tab");
- * </script>
- * ```
- */
-export declare class Tab extends Component<HTMLElement> implements INotifyPropertyChanged {
-    private hdrEle;
-    private cntEle;
-    private tbObj;
-    tabId: string;
-    private tbItems;
-    private tbItem;
-    private tbPop;
-    private isTemplate;
-    private isPopup;
-    private isReplace;
-    private prevIndex;
-    private prevItem;
-    private popEle;
-    private actEleId;
-    private bdrLine;
-    private popObj;
-    private btnCls;
-    private cnt;
-    private show;
-    private hide;
-    private enableAnimation;
-    private keyModule;
-    private tabKeyModule;
-    private touchModule;
-    private maxHeight;
-    private title;
-    private initRender;
-    private isInteracted;
-    private prevActiveEle;
-    private lastIndex;
-    private isSwiped;
-    private isNested;
-    private itemIndexArray;
-    private templateEle;
-    private scrCntClass;
-    private isAdd;
-    private content;
-    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.
-     */
-    private keyConfigs;
-    /**
-     * An array of object that is used to configure the Tab component.
-     *
-     * {% codeBlock src='tab/items/index.md' %}{% endcodeBlock %}
-     *
-     * @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;
-    /**
-     * Defines whether the tab transition should occur or not when performing Touch/Mouse swipe action.
-     *
-     * @remarks
-     * - `Both`: Enables swiping for both touch and mouse input.
-     * - `Touch`: Enables swiping only for touch input.
-     * - `Mouse`: Enables swiping only for mouse input.
-     * - `None`: Disables swiping for both touch and mouse input.
-     *
-     * @default "Both"
-     */
-    swipeMode: TabSwipeMode;
-    /**
-     * 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;
-    /**
-     * Specifies the index for activating the current Tab item.
-     *
-     * {% codeBlock src='tab/selectedItem/index.md' %}{% endcodeBlock %}
-     *
-     * @default 0
-     */
-    selectedItem: number;
-    /**
-     * Specifies the orientation of Tab header.
-     * 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 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.
-     * 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 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` - Only the content of the selected tab is loaded and available in the DOM, and it will be replaced with the corresponding content if the tab is selected dynamically.
-     * * `Init` - The content of all the tabs are rendered on the initial load and maintained in the DOM.
-     *
-     * @default 'Demand'
-     */
-    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
-     */
-    enablePersistence: boolean;
-    /**
-     * 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 true
-     */
-    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 whether the templates need to be cleared or not while changing the Tab items dynamically.
-     * @default true
-     */
-    clearTemplates: 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' } }
-     */
-    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.
-     *
-     * @event
-     */
-    adding: EmitType<AddEventArgs>;
-    /**
-     * The event will be fired after adding the item to the Tab.
-     *
-     * @event
-     */
-    added: EmitType<AddEventArgs>;
-    /**
-     * The event will be fired before the item gets selected.
-     *
-     * @event
-     */
-    selecting: EmitType<SelectingEventArgs>;
-    /**
-     * 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.
-     *
-     * @event
-     */
-    removing: EmitType<RemoveEventArgs>;
-    /**
-     * 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}
-     */
-    destroy(): void;
-    /**
-     * Refresh the tab component
-     *
-     * @returns {void}
-     */
-    refresh(): void;
-    /**
-     * Reorganizes and adjusts the Tab headers to fit the available width without re-rendering the entire Tab component.
-     *
-     * This method is useful for optimizing the layout when:
-     * - A hidden tab item becomes visible.
-     * - The number of tab items changes dynamically.
-     *
-     * @returns {void} This method does not return a value.
-     */
-    refreshOverflow(): void;
-    /**
-     * Initialize component
-     *
-     * @private
-     * @returns {void}
-     */
-    protected preRender(): void;
-    /**
-     * Initializes a new instance of the Tab class.
-     *
-     * @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;
-    private renderHeader;
-    private createContentElement;
-    private renderContent;
-    private reRenderItems;
-    private parseObject;
-    private removeActiveClass;
-    private checkPopupOverflow;
-    private popupHandler;
-    private setCloseButton;
-    private prevCtnAnimation;
-    private triggerPrevAnimation;
-    private triggerAnimation;
-    private keyPressed;
-    private getTabHeader;
-    private getEleIndex;
-    private extIndex;
-    private getMaxIndicesFromItems;
-    private expTemplateContent;
-    private templateCompile;
-    private compileElement;
-    private headerTextCompile;
-    private getContent;
-    private getTrgContent;
-    private findEle;
-    private isVertical;
-    private addVerticalClass;
-    private updatePopAnimationConfig;
-    private changeOrientation;
-    private focusItem;
-    private changeToolbarOrientation;
-    private setOrientation;
-    private setCssClass;
-    private loadContentInitMode;
-    private loadContentElement;
-    private setContentHeight;
-    private getHeight;
-    private setActiveBorder;
-    private setActive;
-    private setItems;
-    private setRTL;
-    private refreshActiveBorder;
-    private showPopup;
-    private bindDraggable;
-    private bindSwipeEvents;
-    private wireEvents;
-    private unWireEvents;
-    private clickHandler;
-    private swipeHandler;
-    private spaceKeyDown;
-    private keyHandler;
-    private refreshItemVisibility;
-    private getIndexFromEle;
-    private hoverHandler;
-    private evalOnPropertyChangeItems;
-    private clearTabTemplate;
-    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.
-     * By default, isEnable is true.
-     * @returns {void}.
-     */
-    enableTab(index: number, value: boolean): void;
-    /**
-     * Adds new items to the Tab that accepts an array as Tab items.
-     *
-     * @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}.
-     */
-    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 (true) or show (false). 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.
-     * @param {Event} event - An event which takes place in DOM.
-     * @returns {void}
-     */
-    select(args: number | HTEle, event?: Event): void;
-    private getSelectingTabIndex;
-    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.
-     */
-    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}.
-     */
-    disable(value: boolean): void;
-    /**
-     * Get the properties to be maintained in the persisted state.
-     *
-     * @returns {string} - It returns the persisted state.
-     */
-    protected getPersistData(): string;
-    /**
-     * Returns the current module name.
-     *
-     * @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 - 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 {};