@syncfusion/ej2-layouts
Version:
A package of Essential JS 2 layout pure CSS components such as card and avatar. The card is used as small container to show content in specific structure, whereas the avatars are icons, initials or figures representing particular person.
596 lines (595 loc) • 18.1 kB
TypeScript
import { Component, ChildProperty } from '@syncfusion/ej2-base';
import { EmitType } from '@syncfusion/ej2-base';
import { SplitterModel, PanePropertiesModel } from './splitter-model';
/**
* Interface to configure pane properties such as its content, size, min, max, resizable, collapsed and collapsible.
*/
export declare class PaneProperties extends ChildProperty<PaneProperties> {
/**
* Configures the properties for each pane.
*
* @default ''
*/
size: string;
/**
* Specifies whether a pane is collapsible or not collapsible.
*
* {% codeBlock src='splitter/collapsible/index.md' %}{% endcodeBlock %}
*
* @default false
*/
collapsible: boolean;
/**
* Specifies whether a pane is collapsed or not collapsed at the initial rendering of splitter.
*
* {% codeBlock src='splitter/collapsed/index.md' %}{% endcodeBlock %}
*
* @default false
*/
collapsed: boolean;
/**
* Specifies the value whether a pane is resizable. By default, the Splitter is resizable in all panes.
* You can disable this for any specific panes using this property.
*
* @default true
*/
resizable: boolean;
/**
* Specifies the minimum size of a pane. The pane cannot be resized if it is less than the specified minimum size.
*
* @default null
*/
min: string;
/**
* Specifies the maximum size of a pane. The pane cannot be resized if it is more than the specified maximum limit.
*
* @default null
*/
max: string;
/**
* Specifies the content of split pane as plain text, HTML markup, or any other JavaScript controls.
*
* @default ''
* @blazorType string
*/
content: string | HTMLElement;
/**
* Specifies the CSS class names that defines specific user-defined
* styles and themes to be appended on corresponding pane of the Splitter.
* It is used to customize the Splitter control panes.
* One or more custom CSS classes can be specified to the Splitter panes.
*
* @default ''
*/
cssClass: string;
}
/**
* Provides information about a SanitizeSelectors.
*/
export interface SanitizeSelectors {
/** Returns the tags. */
tags?: string[];
/** Returns the attributes. */
attributes?: SanitizeRemoveAttrs[];
}
/**
* Provides information about a BeforeSanitizeHtml event.
*/
export interface BeforeSanitizeHtmlArgs {
/** Illustrates whether the current action needs to be prevented or not. */
cancel?: boolean;
/** It is a callback function and executed it before our inbuilt action. It should return HTML as a string.
*
* @function
* @param {string} value - Returns the value.
* @returns {string}
*/
helper?: Function;
/** Returns the selectors object which carrying both tags and attributes selectors to block list of cross-site scripting attack.
* Also possible to modify the block list in this event.
*/
selectors?: SanitizeSelectors;
}
/**
* Provides information about a SanitizeRemoveAttributes.
*/
export interface SanitizeRemoveAttrs {
/** Defines the attribute name to sanitize */
attribute?: string;
/** Defines the selector that sanitize the specified attributes within the selector */
selector?: string;
}
/**
* Specifies a value that indicates whether to align the split panes horizontally or vertically.
*/
export declare type Orientation = 'Horizontal' | 'Vertical';
/**
* Splitter is a layout user interface (UI) control that has resizable and collapsible split panes.
* The container can be split into multiple panes, which are oriented horizontally or vertically.
* The separator (divider) splits the panes and resizes and expands/collapses the panes.
* The splitter is placed inside the split pane to make a nested layout user interface.
*
* ```html
* <div id="splitter">
* <div> Left Pane </div>
* <div> Center Pane </div>
* <div> Right Pane </div>
* </div>
* ```
* ```typescript
* <script>
* var splitterObj = new Splitter({ width: '300px', height: '200px'});
* splitterObj.appendTo('#splitter');
* </script>
* ```
*/
export declare class Splitter extends Component<HTMLElement> {
private onReportWindowSize;
private onMouseMoveHandler;
private onMouseUpHandler;
private onTouchMoveHandler;
private onTouchEndHandler;
private allPanes;
private paneOrder;
private separatorOrder;
private currentSeparator;
private allBars;
private previousCoordinates;
private currentCoordinates;
private totalWidth;
private totalPercent;
private order;
private previousPane;
private nextPane;
private prevPaneIndex;
private previousPaneHeightWidth;
private updatePrePaneInPercentage;
private updateNextPaneInPercentage;
private prePaneDimenson;
private nextPaneDimension;
private panesDimensions;
private border;
private wrapper;
private wrapperParent;
private sizeFlag;
private prevPaneCurrentWidth;
private nextPaneCurrentWidth;
private nextPaneIndex;
private nextPaneHeightWidth;
private validDataAttributes;
private validElementAttributes;
private arrow;
private currentBarIndex;
private prevBar;
private nextBar;
private splitInstance;
private leftArrow;
private rightArrow;
private iconsDelay;
private templateElement;
private collapseFlag;
private expandFlag;
/**
* Specifies the height of the Splitter component that accepts both string and number values.
*
* @default '100%'
*/
height: string;
/**
* Specifies the value whether splitter panes are reordered or not .
*
* @default true
*/
enableReversePanes: boolean;
/**
* Specifies the width of the Splitter control, which accepts both string and number values as width.
* The string value can be either in pixel or percentage format.
*
* @default '100%'
*/
width: string;
/**
* Enables or disables the persisting component's state between page reloads.
*
* @default false
*/
enablePersistence: boolean;
/**
* Configures the individual pane behaviors such as content, size, resizable, minimum, maximum validation, collapsible and collapsed.
*
* {% codeBlock src='splitter/panesettings/index.md' %}{% endcodeBlock %}
*
* @default []
*/
paneSettings: PanePropertiesModel[];
/**
* Specifies a value that indicates whether to align the split panes horizontally or vertically.
* * Set the orientation property as "Horizontal" to create a horizontal splitter that aligns the panes left-to-right.
* * Set the orientation property as "Vertical" to create a vertical splitter that aligns the panes top-to-bottom.
*
* {% codeBlock src='splitter/orientation/index.md' %}{% endcodeBlock %}
*
* @default Horizontal
*/
orientation: Orientation;
/**
* Specifies the CSS class names that defines specific user-defined
* styles and themes to be appended on the root element of the Splitter.
* It is used to customize the Splitter control.
* One or more custom CSS classes can be specified to the Splitter.
*
* @default ''
*/
cssClass: string;
/**
* Specifies boolean value that indicates whether the component is enabled or disabled.
* The Splitter component does not allow to interact when this property is disabled.
*
* @default true
*/
enabled: boolean;
/**
* Defines whether to allow the cross-scripting site or not.
*
* @default true
*/
enableHtmlSanitizer: boolean;
/**
* Specifies the size of the separator line for both horizontal or vertical orientation.
* The separator is used to separate the panes by lines.
*
* @default null
*/
separatorSize: number;
/**
* Event triggers before sanitize the value.
*
* @event 'event'
* @blazorProperty 'OnSanitizeHtml'
*/
beforeSanitizeHtml: EmitType<BeforeSanitizeHtmlArgs>;
/**
* Triggers after creating the splitter component with its panes.
*
* @event 'event'
* @blazorProperty 'Created'
*/
created: EmitType<Object>;
/**
* Triggers when the split pane is started to resize.
*
* @event 'event'
* @blazorProperty 'OnResizeStart'
*/
resizeStart: EmitType<ResizeEventArgs>;
/**
* Triggers when a split pane is being resized.
*
* @event 'event'
* @blazorProperty 'Resizing'
*/
resizing: EmitType<ResizingEventArgs>;
/**
* Triggers when the resizing of split pane is stopped.
*
* @event 'event'
* @blazorProperty 'OnResizeStop'
*/
resizeStop: EmitType<ResizingEventArgs>;
/**
* Triggers when before panes get collapsed.
*
* @event 'event'
* @blazorProperty 'OnCollapse'
*/
beforeCollapse: EmitType<BeforeExpandEventArgs>;
/**
* Triggers when before panes get expanded.
*
* @event 'event'
* @blazorProperty 'OnExpand'
*/
beforeExpand: EmitType<BeforeExpandEventArgs>;
/**
* Triggers when after panes get collapsed.
*
* @event 'event'
* @blazorProperty 'Collapsed'
*/
collapsed: EmitType<ExpandedEventArgs>;
protected needsID: boolean;
/**
* Triggers when after panes get expanded.
*
* @event 'event'
* @blazorProperty 'Expanded'
*/
expanded: EmitType<ExpandedEventArgs>;
/**
* Initializes a new instance of the Splitter class.
*
* @param options - Specifies Splitter model properties as options.
* @param element - Specifies the element that is rendered as an Splitter.
*/
constructor(options?: SplitterModel, element?: string | HTMLElement);
/**
* Gets called when the model property changes.The data that describes the old and new values of the property that changed.
*
* @param {SplitterModel} newProp - specifies the new property
* @param {SplitterModel} oldProp - specifies the old property
* @returns {void}
* @private
*/
onPropertyChanged(newProp: SplitterModel, oldProp: SplitterModel): void;
private updatePaneSize;
protected initializeValues(): void;
protected preRender(): void;
protected getPersistData(): string;
/**
* Returns the current module name.
*
* @returns {string} - returns the string value
* @private
*/
protected getModuleName(): string;
/**
* To Initialize the control rendering
*
* @returns {void}
* @private
*/
render(): void;
private onDocumentClick;
private checkPaneSize;
private onMove;
private getMinInPixel;
/**
* @param {string} value - specifies the string value
* @returns {string} returns the string
* @hidden
*/
sanitizeHelper(value: string): string;
private checkDataAttributes;
private destroyPaneSettings;
private setPaneSettings;
private checkArrow;
private removeDataPrefix;
private setRTL;
private setReversePane;
private setSplitterSize;
private getPanesDimensions;
private setCssClass;
private hideResizer;
private showResizer;
private resizableModel;
private collapsibleModelUpdate;
private collapseArrow;
private updateIsCollapsed;
private isCollapsed;
private targetArrows;
private collapsedOnchange;
private isEnabled;
private setSeparatorSize;
private changeOrientation;
private checkSplitPane;
private collectPanes;
private getPrevPane;
private getNextPane;
private getOrderPane;
private getOrderIndex;
private updateSeparatorSize;
private addResizeHandler;
private getHeight;
private getWidth;
private setDimension;
private updateCollapseIcons;
private updateIconClass;
private createSeparator;
private updateResizablePanes;
private addSeparator;
private isResizable;
private addMouseActions;
private getEventType;
private updateCurrentSeparator;
private isSeparator;
private isMouseEvent;
private updateCursorPosition;
private changeCoordinates;
private reportWindowSize;
private updateSplitterSize;
private wireResizeEvents;
private unwireResizeEvents;
private wireClickEvents;
private clickHandler;
private expandAction;
private getIcon;
private expandPane;
private updateFlexGrow;
private hideTargetBarIcon;
private showTargetBarIcon;
private updateIconsOnCollapse;
private collapseAction;
private collapsePane;
private removeStaticPanes;
private beforeAction;
private updatePaneSettings;
private splitterProperty;
private showCurrentBarIcons;
private hideBarIcons;
private getCollapseCount;
private checkResizableProp;
private updateIconsOnExpand;
private afterAction;
private currentIndex;
private getSeparatorIndex;
private getPrevBar;
private getNextBar;
private updateBars;
private splitterDetails;
private triggerResizing;
private onMouseDown;
private updatePaneFlexBasis;
private removePercentageUnit;
private convertPercentageToPixel;
private convertPixelToPercentage;
private convertPixelToNumber;
private calcDragPosition;
private getSeparatorPosition;
private getMinMax;
private getPreviousPaneIndex;
private getNextPaneIndex;
private getPaneDetails;
private getPaneHeight;
private isValidSize;
private getPaneDimensions;
private checkCoordinates;
private isCursorMoved;
private getBorder;
private onMouseMove;
private validateMinRange;
private validateMaxRange;
private validateMinMaxValues;
private equatePaneWidths;
private calculateCurrentDimensions;
private addStaticPaneClass;
private validateDraggedPosition;
private onMouseUp;
private panesDimension;
private setTemplate;
private templateCompile;
private compileElement;
private paneCollapsible;
private createSplitPane;
/**
* expands corresponding pane based on the index is passed.
*
* @param { number } index - Specifies the index value of the corresponding pane to be expanded at initial rendering of splitter.
* @returns {void}
*/
expand(index: number): void;
/**
* collapses corresponding pane based on the index is passed.
*
* @param { number } index - Specifies the index value of the corresponding pane to be collapsed at initial rendering of splitter.
* @returns {void}
*/
collapse(index: number): void;
/**
* Removes the control from the DOM and also removes all its related events.
*
* @returns {void}
*/
destroy(): void;
private restoreElem;
private addPaneClass;
private removePaneOrders;
private setPaneOrder;
private removeSeparator;
private updatePanes;
/**
* Allows you to add a pane dynamically to the specified index position by passing the pane properties.
*
* @param { PanePropertiesModel } paneProperties - Specifies the pane’s properties that apply to new pane.
* @param { number } index - Specifies the index where the pane will be inserted.
* @returns {void}
*/
addPane(paneProperties: PanePropertiesModel, index: number): void;
/**
* Allows you to remove the specified pane dynamically by passing its index value.
*
* @param { number } index - Specifies the index value to remove the corresponding pane.
* @returns {void}
*/
removePane(index: number): void;
}
/**
* Provides information about a Resize event.
*/
export interface ResizeEventArgs {
/** Contains the root element of resizing pane. */
element?: HTMLElement;
/** Contains default event arguments. */
event?: Event;
/** Contains the corresponding resizing pane. */
pane?: HTMLElement[];
/** Contains the index of resizing pane. */
index?: number[];
/** Contains the resizing pane’s separator element. */
separator?: HTMLElement;
/**
* Control the resize action whether the resize action happens continuously.
* When you set this argument to true, resize process will be stopped.
*/
cancel?: boolean;
}
/**
* Provides information about a Resizing event.
*/
export interface ResizingEventArgs {
/** Contains the root element of resizing pane. */
element?: HTMLElement;
/** Contains default event arguments. */
event?: Event;
/** Contains a pane size when it resizes. */
paneSize?: number[];
/** Contains the corresponding resizing pane. */
pane?: HTMLElement[];
/** Contains the index of resizing pane. */
index?: number[];
/** Contains the resizing pane’s separator element. */
separator?: HTMLElement;
}
/**
* Provides information about a BeforeExpand event.
*/
export interface BeforeExpandEventArgs {
/**
* To access root element after control created
*/
element?: HTMLElement;
/**
* default event arguments
*/
event?: Event;
/**
* To get pane elements
*/
pane?: HTMLElement[];
/**
* Index of pane
*/
index?: number[];
/**
* Respective split-bar element
*/
separator?: HTMLElement;
/**
* cancel argument
*/
cancel?: boolean;
}
/**
* Provides information about a Expanded event.
*/
export interface ExpandedEventArgs {
/**
* To access root element after control created
*/
element?: HTMLElement;
/**
* default event arguments
*/
event?: Event;
/**
* To get pane elements
*/
pane?: HTMLElement[];
/**
* Index of pane
*/
index?: number[];
/**
* Respective split-bar element
*/
separator?: HTMLElement;
}