@syncfusion/ej2-navigations 16.4.47 → 16.4.52-46585

package/src/sidebar/sidebar.d.ts

@@ -4,11 +4,35 @@ import { SidebarModel } from './sidebar-model';
 /**
  * Specifies the Sidebar types.
  */
-export declare type SidebarType = 'Slide' | 'Over' | 'Push' | 'Auto';
+export declare type SidebarType = 
+/**
+* Specifies the animation sliding while opening the sidebar.
+*/
+'Slide' | 
+/**
+* Specifies the sidebar appearing over the main content.
+*/
+'Over' | 
+/**
+* Specifies the sidebar pushing the main content.
+*/
+'Push' | 
+/**
+* Specifies that the sidebar opens automatically.
+*/
+'Auto';
 /**
  * Specifies the Sidebar positions.
  */
-export declare type SidebarPosition = 'Left' | 'Right';
+export declare type SidebarPosition = 
+/**
+* Sidebar positions to the Left in relation to the main content.
+*/
+'Left' | 
+/**
+* Sidebar positions to the Right in relation to the main content.
+*/
+'Right';
 /**
  * Sidebar is an expandable or collapsible
  * component that typically act as a side container to place the primary or secondary content alongside of the main content.
@@ -27,36 +51,45 @@ export declare class Sidebar extends Component<HTMLElement> implements INotifyPr
     private modal;
     private mainContentEle;
     private sidebarEle;
+    private sidebarEleCopy;
+    protected tabIndex: string;
+    private windowWidth;
+    private targetEle;
+    private firstRender;
     /**
      * Specifies the size of the Sidebar in dock state.
      * > For more details about dockSize refer to
-     * [`Dock`](https://ej2.syncfusion.com/documentation/sidebar/docking-sidebar.html?lang=typescript) documentation.
+     * [`Dock`](https://ej2.syncfusion.com/documentation/sidebar/docking-sidebar/) documentation.
+     *
      * @default 'auto'
      */
     dockSize: string | number;
     /**
-     * Specifies the media query whether the sidebar need to be opened when the resolution meets
+     * Specifies the media query string for resolution, which when met opens the Sidebar.
      * ```typescript
      *   let defaultSidebar: Sidebar = new Sidebar({
-     *       mediaQuery: window.matchMedia('(min-width: 600px)')
+     *       mediaQuery:'(min-width: 600px)'
      *   });
      * ```
      * > For more details about mediaQuery refer to
-     * [`Auto Close`](https://ej2.syncfusion.com/documentation/sidebar/autoclose.html?lang=typescript) documentation.
+     * [`Auto Close`](https://ej2.syncfusion.com/documentation/sidebar/auto-close/) documentation.
+     *
      * @default null
-     * @aspIgnore
+     * @aspType string
      */
-    mediaQuery: MediaQueryList;
+    mediaQuery: string | MediaQueryList;
     /**
      * Specifies the docking state of the component.
      * > For more details about enableDock refer to
-     * [`Dock`](https://ej2.syncfusion.com/documentation/sidebar/docking-sidebar.html?lang=typescript) documentation.
+     * [`Dock`](https://ej2.syncfusion.com/documentation/sidebar/docking-sidebar/) documentation.
+     *
      * @default false
      */
     enableDock: boolean;
     /**
      * Enables the expand or collapse while swiping in touch devices.
      * This is not a sidebar property.
+     *
      * @default 'en-US'
      * @private
      */
@@ -65,58 +98,70 @@ export declare class Sidebar extends Component<HTMLElement> implements INotifyPr
      * Enable or disable persisting component's state between page reloads. If enabled, following list of states will be persisted.
      * 1. Position
      * 2. Type
+     *
      * @default false
      */
     enablePersistence: boolean;
     /**
      * Enables the expand or collapse while swiping in touch devices.
+     *
      * @default true
      */
     enableGestures: boolean;
     /**
      * Gets or sets the Sidebar component is open or close.
+     * > When the Sidebar type is set to `Auto`,
+     * the component will be expanded in the desktop and collapsed in the mobile mode regardless of the isOpen property.
+     *
      * @default false
      */
     isOpen: boolean;
     /**
      * Specifies the Sidebar in RTL mode that displays the content in the right-to-left direction.
+     *
      * @default false
      */
     enableRtl: boolean;
     /**
      * Enable or disable the animation transitions on expanding or collapsing the Sidebar.
+     *
      * @default true
      */
     animate: boolean;
     /**
      * Specifies the height of the Sidebar.
+     *
      * @default 'auto'
      * @private
      */
     height: string | number;
     /**
      * Specifies whether the Sidebar need to be closed or not when document area is clicked.
+     *
      * @default false
      */
     closeOnDocumentClick: boolean;
     /**
      * Specifies the position of the Sidebar (Left/Right) corresponding to the main content.
      * > For more details about SidebarPosition refer to
-     * [`position`](https://ej2.syncfusion.com/documentation/sidebar/getting-started.html?lang=typescript#position) documentation.
+     * [`position`](https://ej2.syncfusion.com/documentation/sidebar/getting-started/#position) documentation.
+     *
      * @default 'Left'
      */
     position: SidebarPosition;
     /**
      * Allows to place the sidebar inside the target element.
      * > For more details about target refer to
-     * [`Custom Context`](https://ej2.syncfusion.com/documentation/sidebar/custom-context.html?lang=typescript) documentation.
+     * [`Custom Context`](https://ej2.syncfusion.com/documentation/sidebar/custom-context/) documentation.
+     *
      * @default null
      */
     target: HTMLElement | string;
     /**
      * Specifies the whether to apply overlay options to main content when the Sidebar is in an open state.
      * > For more details about showBackdrop refer to
-     * [`Backdrop`](https://ej2.syncfusion.com/documentation/sidebar/getting-started.html?lang=typescript#enable-backdrop) documentation.
+     * [`Backdrop`](https://ej2.syncfusion.com/documentation/sidebar/getting-started/#enable-backdrop) documentation.
+     *
      * @default false
      */
     showBackdrop: boolean;
@@ -128,101 +173,137 @@ export declare class Sidebar extends Component<HTMLElement> implements INotifyPr
      * The main content area will not be adjusted within the screen width.
      * * `Auto` - Sidebar with `Over` type in mobile resolution and `Push` type in other higher resolutions.
      * > For more details about SidebarType refer to
-     * [`SidebarType`](./variations.html#types) documentation.
+     * [`SidebarType`](../../sidebar/variations/) documentation.
+     *
      * @default 'Auto'
      */
     type: SidebarType;
     /**
      * Specifies the width of the Sidebar. By default, the width of the Sidebar sets based on the size of its content.
      * Width can also be set in pixel values.
+     *
      * @default 'auto'
      */
     width: string | number;
     /**
      * Specifies the z-index of the Sidebar. It is applicable only when sidebar act as overlay type.
+     *
      * @default 1000
+     * @aspType double
      */
     zIndex: string | number;
     /**
      * Triggers when component is created.
+     *
      * @event
+     *
+     *
      */
     created: EmitType<Object>;
     /**
      * Triggers when component is closed.
+     *
      * @event
      */
     close: EmitType<EventArgs>;
     /**
      * Triggers when component is opened.
+     *
      * @event
      */
     open: EmitType<EventArgs>;
     /**
      * Triggers when the state(expand/collapse) of the component is changed.
+     *
      * @event
      */
     change: EmitType<ChangeEventArgs>;
     /**
      * Triggers when component gets destroyed.
+     *
      * @event
      */
     destroyed: EmitType<Object>;
+    defaultBackdropDiv: any;
     constructor(options?: SidebarModel, element?: string | HTMLElement);
     protected preRender(): void;
     protected render(): void;
     protected initialize(): void;
     private setEnableRTL;
     private setTarget;
+    private getTargetElement;
     private setCloseOnDocumentClick;
     private setWidth;
     private setDimension;
     private setZindex;
     private addClass;
+    private checkType;
+    private transitionEnd;
     private destroyBackDrop;
     /**
      * Hide the Sidebar component, if it is in an open state.
-     * @returns void
+     *
+     * @returns {void}
+     *
      */
-    hide(): void;
+    hide(e?: Event): void;
+    private setTimeOut;
     /**
      * Shows the Sidebar component, if it is in closed state.
-     * @returns void
+     *
+     * @returns {void}
      */
-    show(): void;
+    show(e?: Event): void;
     private setAnimation;
+    private triggerChange;
     private setDock;
     private createBackDrop;
     protected getPersistData(): string;
     /**
      * Returns the current module name.
-     * @returns string
+     *
+     * @returns {string} - returns module name.
      * @private
+     *
      */
     protected getModuleName(): string;
     /**
      * Shows or hides the Sidebar based on the current state.
-     * @returns void
+     *
+     * @returns {void}
      */
-    toggle(e?: Event): void;
+    toggle(): void;
     protected getState(): boolean;
     private setMediaQuery;
-    protected resize(e: Event): void;
+    protected resize(): void;
     private documentclickHandler;
     private enableGestureHandler;
     private setEnableGestures;
     private wireEvents;
     private unWireEvents;
+    /**
+     * Called internally if any of the property value changed.
+     *
+     * @param {SidebarModel} newProp - specifies newProp value.
+     * @param {SidebarModel} oldProp - specifies oldProp value.
+     * @returns {void}
+     * @private
+     *
+     */
     onPropertyChanged(newProp: SidebarModel, oldProp: SidebarModel): void;
     protected setType(type?: string): void;
     /**
      * Removes the control from the DOM and detaches all its related event handlers. Also it removes the attributes and classes.
-     * @returns void
+     *
+     * @returns {void}
+     *
      */
     destroy(): void;
 }
 /**
+ *
  * Defines the event arguments for the event.
+ *
  * @returns void
  */
 export interface ChangeEventArgs {
@@ -235,6 +316,12 @@ export interface ChangeEventArgs {
      */
     element: HTMLElement;
 }
+export interface TransitionEvent extends Event {
+    /**
+     * Returns event name
+     */
+    propertyName: string;
+}
 export interface EventArgs {
     /**
      * Illustrates whether the current action needs to be prevented or not.
@@ -248,4 +335,12 @@ export interface EventArgs {
      * Defines the element.
      */
     element: HTMLElement;
+    /**
+     * Defines the boolean that returns true when the Sidebar is closed by user interaction, otherwise returns false.
+     */
+    isInteracted?: boolean;
+    /**
+     * Defines the original event arguments.
+     */
+    event?: MouseEvent | Event;
 }