@syncfusion/ej2-navigations 17.3.9-beta → 17.3.14-96615

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

@@ -1,4 +1,4 @@
-import { Component, Property, Event, EmitType, closest, Collection, Complex, attributes, detach, Instance } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, NotifyPropertyChanges, ChildProperty, AnimationOptions, select, isVisible } from '@syncfusion/ej2-base';import { KeyboardEvents, KeyboardEventArgs, MouseEventArgs, Effect, Browser, formatUnit, DomElements, L10n } from '@syncfusion/ej2-base';import { setStyleAttribute as setStyle, isNullOrUndefined as isNOU, selectAll, addClass, removeClass, remove } from '@syncfusion/ej2-base';import { EventHandler, rippleEffect, Touch, SwipeEventArgs, compile, Animation, AnimationModel, BaseEventArgs } from '@syncfusion/ej2-base';import { updateBlazorTemplate, isBlazor } from '@syncfusion/ej2-base';import { Popup, PopupModel } from '@syncfusion/ej2-popups';import { Toolbar, OverflowMode, ClickEventArgs } from '../toolbar/toolbar';
+import { Component, Property, Event, EmitType, closest, Collection, Complex, attributes, detach, Instance } from '@syncfusion/ej2-base';
 import {HeaderPosition,HeightStyles,AddEventArgs,SelectingEventArgs,SelectEventArgs,RemoveEventArgs} from "./tab";
 import {ComponentModel} from '@syncfusion/ej2-base';
 
@@ -8,24 +8,24 @@ import {ComponentModel} from '@syncfusion/ej2-base';
 export interface TabActionSettingsModel {
 
     /**
-     * Specifies the animation effect for displaying Tab content.
-     * @default 'SlideLeftIn'
-     * @aspType string
-     * @blazorType string
-     */
-    effect?: 'None' | Effect;
+     * Specifies the animation effect for displaying Tab content.
+     * @default 'SlideLeftIn'
+     * @aspType string
+     * @blazorType string
+     */
+    effect?: 'None' | Effect;
 
     /**
-     * Specifies the time duration to transform content.
-     * @default 600
-     */
-    duration?: number;
+     * Specifies the time duration to transform content.
+     * @default 600
+     */
+    duration?: number;
 
     /**
-     * Specifies easing effect applied while transforming content.
-     * @default 'ease'
-     */
-    easing?: string;
+     * Specifies easing effect applied while transforming content.
+     * @default 'ease'
+     */
+    easing?: string;
 
 }
 
@@ -35,16 +35,16 @@ export interface TabActionSettingsModel {
 export interface TabAnimationSettingsModel {
 
     /**
-     * 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 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;
+     * Specifies the animation to appear while moving to next Tab content.
+     * @default { effect: 'SlideRightIn', duration: 600, easing: 'ease' }
+     */
+    next?: TabActionSettingsModel;
 
 }
 
@@ -54,27 +54,27 @@ export interface TabAnimationSettingsModel {
 export interface HeaderModel {
 
     /**
-     * Specifies the display text of the Tab item header.
-     * @default ''
-     */
-    text?: string | HTMLElement;
+     * 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;
+     * 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.
-     * @default 'left'
-     */
-    iconPosition?: 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.
+     * @default 'left'
+     */
+    iconPosition?: string;
 
 }
 
@@ -84,34 +84,34 @@ export interface HeaderModel {
 export interface TabItemModel {
 
     /**
-     * The object used for configuring the Tab item header properties.
-     * @default {}
-     */
-    header?: HeaderModel;
+     * 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 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;
+     * 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 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 true to disable user interactions of the Tab item.
+     * @default false
+     */
+    disabled?: boolean;
 
 }
 
@@ -121,169 +121,169 @@ export interface TabItemModel {
 export interface TabModel extends ComponentModel{
 
     /**
-     * An array of object that is used to configure the Tab component.
-     * ```typescript
-     *   let tabObj: Tab = new Tab( {
-     *     items: [
-     *       { header: { text: 'TabItem1' }, content: 'Tab Item1 Content' },
-     *       { header: { text: 'TabItem2' }, content: 'Tab Item2 Content' }
-     *     ]
-     *   });
-     *   tabObj.appendTo('#tab');
-     * ```
-     * @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;
-
-    /**
-     * Specifies the index for activating the current Tab item.
-     * ```typescript
-     *   let tabObj: Tab = new Tab( {
-     *     selectedItem: 1,
-     *     items: [
-     *       { header: { text: 'TabItem1' }, content: 'Tab Item1 Content' },
-     *       { header: { text: 'TabItem2' }, content: 'Tab Item2 Content' }
-     *     ]
-     *   });
-     *   tabObj.appendTo('#tab');
-     * ```
-     * @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.
-     * @default 'Top'
-     */
-    headerPlacement?: HeaderPosition;
+     * An array of object that is used to configure the Tab component.
+     * ```typescript
+     *   let tabObj: Tab = new Tab( {
+     *     items: [
+     *       { header: { text: 'TabItem1' }, content: 'Tab Item1 Content' },
+     *       { header: { text: 'TabItem2' }, content: 'Tab Item2 Content' }
+     *     ]
+     *   });
+     *   tabObj.appendTo('#tab');
+     * ```
+     * @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;
+
+    /**
+     * Specifies the index for activating the current Tab item.
+     * ```typescript
+     *   let tabObj: Tab = new Tab( {
+     *     selectedItem: 1,
+     *     items: [
+     *       { header: { text: 'TabItem1' }, content: 'Tab Item1 Content' },
+     *       { header: { text: 'TabItem2' }, content: 'Tab Item2 Content' }
+     *     ]
+     *   });
+     *   tabObj.appendTo('#tab');
+     * ```
+     * @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.
+     * @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.
-     * @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;
-
-    /**
-     * 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 show the close button for header items to remove the item from the Tab.
-     * @default false
-     */
-    showCloseButton?: boolean;
-
-    /**
-     * Specifies the scrolling distance in scroller.
-     * @default null  
-     */
-    scrollStep?: number;
-
-    /**
-     * 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;
-
+     * 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.
+     * @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;
+
+    /**
+     * 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 show the close button for header items to remove the item from the Tab.
+     * @default false
+     */
+    showCloseButton?: boolean;
+
+    /**
+     * Specifies the scrolling distance in scroller.
+     * @default null  
+     */
+    scrollStep?: number;
+
+    /**
+     * 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
-     * @blazorProperty 'Created'
-     */
-    created?: EmitType<Event>;
-
-    /**
-     * The event will be fired before adding the item to the Tab.
-     * @event
-     * @blazorProperty 'Adding'
-     */
-    adding?: EmitType<AddEventArgs>;
-
-    /**
-     * The event will be fired after adding the item to the Tab.
-     * @event
-     * @blazorProperty 'Added'
-     */
-    added?: EmitType<AddEventArgs>;
-
-    /**
-     * The event will be fired before the item gets selected.
-     * @event
-     * @blazorProperty 'Selecting'
-     */
-    selecting?: EmitType<SelectingEventArgs>;
-
-    /**
-     * The event will be fired after the item gets selected.
-     * @event
-     * @blazorProperty 'Selected'
-     */
-    selected?: EmitType<SelectEventArgs>;
+     * The event will be fired once the component rendering is completed.
+     * @event
+     * @blazorProperty 'Created'
+     */
+    created?: EmitType<Event>;
+
+    /**
+     * The event will be fired before adding the item to the Tab.
+     * @event
+     * @blazorProperty 'Adding'
+     */
+    adding?: EmitType<AddEventArgs>;
+
+    /**
+     * The event will be fired after adding the item to the Tab.
+     * @event
+     * @blazorProperty 'Added'
+     */
+    added?: EmitType<AddEventArgs>;
+
+    /**
+     * The event will be fired before the item gets selected.
+     * @event
+     * @blazorProperty 'Selecting'
+     */
+    selecting?: EmitType<SelectingEventArgs>;
+
+    /**
+     * The event will be fired after the item gets selected.
+     * @event
+     * @blazorProperty 'Selected'
+     */
+    selected?: EmitType<SelectEventArgs>;
 
     /**
-     * The event will be fired before removing the item from the Tab.
-     * @event
-     * @blazorProperty 'Removing'
-     */
-    removing?: EmitType<RemoveEventArgs>;
+     * The event will be fired before removing the item from the Tab.
+     * @event
+     * @blazorProperty 'Removing'
+     */
+    removing?: EmitType<RemoveEventArgs>;
 
     /**
-     * The event will be fired after removing the item from the Tab.
-     * @event
-     * @blazorProperty 'Removed'
-     */
-    removed?: EmitType<RemoveEventArgs>;
+     * The event will be fired after removing the item from the Tab.
+     * @event
+     * @blazorProperty 'Removed'
+     */
+    removed?: EmitType<RemoveEventArgs>;
 
     /**
-     * The event will be fired when the component gets destroyed.
-     * @event
-     * @blazorProperty 'Destroyed'
-     */
-    destroyed?: EmitType<Event>;
+     * The event will be fired when the component gets destroyed.
+     * @event
+     * @blazorProperty 'Destroyed'
+     */
+    destroyed?: EmitType<Event>;
 
 }

package/src/tab/tab.d.ts

@@ -152,6 +152,7 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
     private hdrEle;
     private cntEle;
     private tbObj;
+    tabId: string;
     private tbItems;
     private tbItem;
     private tbPop;
@@ -375,6 +376,7 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
     private triggerPrevAnimation;
     private triggerAnimation;
     private keyPressed;
+    private getTabHeader;
     private getEleIndex;
     private extIndex;
     private expTemplateContent;
@@ -408,6 +410,7 @@ export declare class Tab extends Component<HTMLElement> implements INotifyProper
     private refreshItemVisibility;
     private hoverHandler;
     private evalOnPropertyChangeItems;
+    private resetBlazorTemplates;
     /**
      * 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.