igniteui-angular

import * as i0 from '@angular/core'; import { EventEmitter, AfterContentInit, QueryList } from '@angular/core'; import { DragDirection, IDragStartEventArgs, IDragMoveEventArgs } from 'igniteui-angular/directives'; /** * Represents individual resizable/collapsible panes. * * @igxModule IgxSplitterModule * * @igxParent IgxSplitterComponent * * @igxKeywords pane * * @igxGroup presentation * * @remarks * Users can control the resize behavior via the min and max size properties. */ declare class IgxSplitterPaneComponent { private el; private _minSize; private _maxSize; private _order; /** * @hidden @internal * Gets/Sets the 'display' property of the current pane. */ display: string; /** * Gets/Sets the minimum allowed size of the current pane. * * @example * ```html * <igx-splitter> * <igx-splitter-pane [minSize]='minSize'>...</igx-splitter-pane> * </igx-splitter> * ``` */ get minSize(): string; set minSize(value: string); /** * Gets/Set the maximum allowed size of the current pane. * * @example * ```html * <igx-splitter> * <igx-splitter-pane [maxSize]='maxSize'>...</igx-splitter-pane> * </igx-splitter> * ``` */ get maxSize(): string; set maxSize(value: string); /** * Gets/Sets whether pane is resizable. * * @example * ```html * <igx-splitter> * <igx-splitter-pane [resizable]='false'>...</igx-splitter-pane> * </igx-splitter> * ``` * @remarks * If pane is not resizable its related splitter bar cannot be dragged. */ resizable: boolean; /** * Event fired when collapsed state of pane is changed. * * @example * ```html * <igx-splitter> * <igx-splitter-pane (collapsedChange)='paneCollapsedChange($event)'>...</igx-splitter-pane> * </igx-splitter> * ``` */ collapsedChange: EventEmitter<boolean>; /** @hidden @internal */ get order(): number; set order(val: number); /** * @hidden @internal * Gets/Sets the `overflow`. */ overflow: string; /** * @hidden @internal * Get/Sets the `minWidth` properties of the current pane. */ minWidth: string; /** * @hidden @internal * Get/Sets the `maxWidth` properties of the current pane. */ maxWidth: string; /** * @hidden @internal * Gets/Sets the `minHeight` properties of the current pane. */ minHeight: string; /** * @hidden @internal * Gets/Sets the `maxHeight` properties of the current `IgxSplitterPaneComponent`. */ maxHeight: string; /** @hidden @internal */ owner: any; /** * Gets/Sets the size of the current pane. * * @example * ```html * <igx-splitter> * <igx-splitter-pane [size]='size'>...</igx-splitter-pane> * </igx-splitter> * ``` */ get size(): string; set size(value: string); /** @hidden @internal */ get isPercentageSize(): boolean; /** @hidden @internal */ get dragSize(): any; set dragSize(val: any); /** * * @hidden @internal * Gets the host native element. */ get element(): any; /** * @hidden @internal * Gets the `flex` property of the current `IgxSplitterPaneComponent`. */ get flex(): string; /** * Gets/Sets whether current pane is collapsed. * * @example * ```typescript * const isCollapsed = pane.collapsed; * ``` */ set collapsed(value: boolean); get collapsed(): boolean; private _size; private _dragSize; private _collapsed; /** * Toggles the collapsed state of the pane. * * @example * ```typescript * pane.toggle(); * ``` */ toggle(): void; /** @hidden @internal */ private _getSiblings; static ɵfac: i0.ɵɵFactoryDeclaration<IgxSplitterPaneComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<IgxSplitterPaneComponent, "igx-splitter-pane", never, { "minSize": { "alias": "minSize"; "required": false; }; "maxSize": { "alias": "maxSize"; "required": false; }; "resizable": { "alias": "resizable"; "required": false; }; "size": { "alias": "size"; "required": false; }; "collapsed": { "alias": "collapsed"; "required": false; }; }, { "collapsedChange": "collapsedChange"; }, never, ["*"], true, never>; static ngAcceptInputType_resizable: unknown; static ngAcceptInputType_collapsed: unknown; } /** * An enumeration that defines the `SplitterComponent` panes orientation. */ declare enum SplitterType { Horizontal = 0, Vertical = 1 } declare interface ISplitterBarResizeEventArgs { pane: IgxSplitterPaneComponent; sibling: IgxSplitterPaneComponent; } /** * Provides a framework for a simple layout, splitting the view horizontally or vertically * into multiple smaller resizable and collapsible areas. * * @igxModule IgxSplitterModule * * @igxParent Layouts * * @igxTheme igx-splitter-theme * * @igxKeywords splitter panes layout * * @igxGroup presentation * * @example * ```html * <igx-splitter> * <igx-splitter-pane> * ... * </igx-splitter-pane> * <igx-splitter-pane> * ... * </igx-splitter-pane> * </igx-splitter> * ``` */ declare class IgxSplitterComponent implements AfterContentInit { document: Document; private elementRef; private zone; /** * Gets the list of splitter panes. * * @example * ```typescript * const panes = this.splitter.panes; * ``` */ panes: QueryList<IgxSplitterPaneComponent>; /** * @hidden * @internal */ cssClass: string; /** * @hidden @internal * Gets/Sets the `overflow` property of the current splitter. */ overflow: string; /** * @hidden @internal * Sets/Gets the `display` property of the current splitter. */ display: string; /** * @hidden * @internal */ get orientation(): "horizontal" | "vertical"; /** * Event fired when resizing of panes starts. * * @example * ```html * <igx-splitter (resizeStart)='resizeStart($event)'> * <igx-splitter-pane>...</igx-splitter-pane> * </igx-splitter> * ``` */ resizeStart: EventEmitter<ISplitterBarResizeEventArgs>; /** * Event fired when resizing of panes is in progress. * * @example * ```html * <igx-splitter (resizing)='resizing($event)'> * <igx-splitter-pane>...</igx-splitter-pane> * </igx-splitter> * ``` */ resizing: EventEmitter<ISplitterBarResizeEventArgs>; /** * Event fired when resizing of panes ends. * * @example * ```html * <igx-splitter (resizeEnd)='resizeEnd($event)'> * <igx-splitter-pane>...</igx-splitter-pane> * </igx-splitter> * ``` */ resizeEnd: EventEmitter<ISplitterBarResizeEventArgs>; private _type; /** * @hidden @internal * A field that holds the initial size of the main `IgxSplitterPaneComponent` in each pair of panes divided by a splitter bar. */ private initialPaneSize; /** * @hidden @internal * A field that holds the initial size of the sibling pane in each pair of panes divided by a gripper. * @memberof SplitterComponent */ private initialSiblingSize; /** * @hidden @internal * The main pane in each pair of panes divided by a gripper. */ private pane; /** * The sibling pane in each pair of panes divided by a splitter bar. */ private sibling; /** * Gets/Sets the splitter orientation. * * @example * ```html * <igx-splitter [type]="type">...</igx-splitter> * ``` */ get type(): SplitterType; set type(value: SplitterType); /** * Sets the visibility of the handle and expanders in the splitter bar. * False by default * * @example * ```html * <igx-splitter [nonCollapsible]='true'> * </igx-splitter> * ``` */ nonCollapsible: boolean; /** * @hidden @internal * Gets the `flex-direction` property of the current `SplitterComponent`. */ get direction(): string; /** @hidden @internal */ ngAfterContentInit(): void; /** * @hidden @internal * This method performs initialization logic when the user starts dragging the splitter bar between each pair of panes. * @param pane - the main pane associated with the currently dragged bar. */ onMoveStart(pane: IgxSplitterPaneComponent): void; /** * @hidden @internal * This method performs calculations concerning the sizes of each pair of panes when the bar between them is dragged. * @param delta - The difference along the X (or Y) axis between the initial and the current point when dragging the bar. */ onMoving(delta: number): void; onMoveEnd(delta: number): void; /** @hidden @internal */ getPaneSiblingsByOrder(order: number, barIndex: number): Array<IgxSplitterPaneComponent>; private getTotalSize; /** * @hidden @internal * This method inits panes with properties. */ private initPanes; /** * @hidden @internal * This method reset pane sizes. */ private resetPaneSizes; /** * @hidden @internal * This method assigns the order of each pane. */ private assignFlexOrder; /** * @hidden @internal * Calculates new sizes for the panes based on move delta and initial sizes */ private calcNewSizes; static ɵfac: i0.ɵɵFactoryDeclaration<IgxSplitterComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<IgxSplitterComponent, "igx-splitter", never, { "type": { "alias": "type"; "required": false; }; "nonCollapsible": { "alias": "nonCollapsible"; "required": false; }; }, { "resizeStart": "resizeStart"; "resizing": "resizing"; "resizeEnd": "resizeEnd"; }, ["panes"], ["igx-splitter-pane"], true, never>; static ngAcceptInputType_nonCollapsible: unknown; } /** * @hidden @internal * Represents the draggable bar that visually separates panes and allows for changing their sizes. */ declare class IgxSplitBarComponent { /** * Set css class to the host element. */ cssClass: string; /** * Sets the visibility of the handle and expanders in the splitter bar. */ nonCollapsible: any; /** * Gets/Sets the orientation. */ type: SplitterType; /** * Sets/gets the element order. */ order: number; /** * @hidden * @internal */ get tabindex(): number; /** * @hidden * @internal */ get orientation(): "horizontal" | "vertical"; /** * @hidden * @internal */ get cursor(): "" | "col-resize" | "row-resize"; /** * Sets/gets the `SplitPaneComponent` associated with the current `SplitBarComponent`. * * @memberof SplitBarComponent */ pane: IgxSplitterPaneComponent; /** * Sets/Gets the `SplitPaneComponent` sibling components associated with the current `SplitBarComponent`. */ siblings: Array<IgxSplitterPaneComponent>; /** * An event that is emitted whenever we start dragging the current `SplitBarComponent`. */ moveStart: EventEmitter<IgxSplitterPaneComponent>; /** * An event that is emitted while we are dragging the current `SplitBarComponent`. */ moving: EventEmitter<number>; movingEnd: EventEmitter<number>; /** * A temporary holder for the pointer coordinates. */ private startPoint; private interactionKeys; /** * @hidden @internal */ get prevButtonHidden(): boolean; /** * @hidden @internal */ keyEvent(event: KeyboardEvent): void; /** * @hidden @internal */ get dragDir(): DragDirection.VERTICAL | DragDirection.HORIZONTAL; /** * @hidden @internal */ get nextButtonHidden(): boolean; /** * @hidden @internal */ onDragStart(event: IDragStartEventArgs): void; /** * @hidden @internal */ onDragMove(event: IDragMoveEventArgs): void; onDragEnd(event: any): void; protected get resizeDisallowed(): boolean; /** * @hidden @internal */ onCollapsing(next: boolean): void; static ɵfac: i0.ɵɵFactoryDeclaration<IgxSplitBarComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<IgxSplitBarComponent, "igx-splitter-bar", never, { "nonCollapsible": { "alias": "nonCollapsible"; "required": false; }; "type": { "alias": "type"; "required": false; }; "order": { "alias": "order"; "required": false; }; "pane": { "alias": "pane"; "required": false; }; "siblings": { "alias": "siblings"; "required": false; }; }, { "moveStart": "moveStart"; "moving": "moving"; "movingEnd": "movingEnd"; }, never, never, true, never>; static ngAcceptInputType_nonCollapsible: unknown; } declare const IGX_SPLITTER_DIRECTIVES: readonly [typeof IgxSplitterComponent, typeof IgxSplitterPaneComponent, typeof IgxSplitBarComponent]; /** * @hidden * @deprecated * IMPORTANT: The following is NgModule exported for backwards-compatibility before standalone components */ declare class IgxSplitterModule { static ɵfac: i0.ɵɵFactoryDeclaration<IgxSplitterModule, never>; static ɵmod: i0.ɵɵNgModuleDeclaration<IgxSplitterModule, never, [typeof IgxSplitterComponent, typeof IgxSplitterPaneComponent, typeof IgxSplitBarComponent], [typeof IgxSplitterComponent, typeof IgxSplitterPaneComponent, typeof IgxSplitBarComponent]>; static ɵinj: i0.ɵɵInjectorDeclaration<IgxSplitterModule>; } export { IGX_SPLITTER_DIRECTIVES, IgxSplitBarComponent, IgxSplitterComponent, IgxSplitterModule, IgxSplitterPaneComponent, SplitterType }; export type { ISplitterBarResizeEventArgs };