primeng
Version:
PrimeNG is a premium UI library for Angular featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock,
334 lines (329 loc) • 14.1 kB
TypeScript
import { SplitterPanelPassThrough, SplitterPassThrough, SplitterStateStorage, SplitterLayout, SplitterResizeEndEvent, SplitterResizeStartEvent, SplitterResizeEvent, SplitterCollapseEvent } from 'primeng/types/splitter';
export * from 'primeng/types/splitter';
import * as _angular_core from '@angular/core';
import { TemplateRef, ElementRef } from '@angular/core';
import { BaseComponent } from 'primeng/basecomponent';
import * as i1 from 'primeng/bind';
import { Bind } from 'primeng/bind';
import { VoidListener, Nullable } from 'primeng/ts-helpers';
import { CSSProperties } from 'primeng/types/shared';
import { BaseStyle } from 'primeng/base';
import * as i3 from 'primeng/api';
/**
*
* Splitter is utilized to separate and resize panels.
*
* [Live Demo](https://www.primeng.org/splitter/)
*
* @module splitterstyle
*
*/
declare enum SplitterClasses {
/**
* Class name of the root element
*/
root = "p-splitter",
/**
* Class name of the panel element
*/
panel = "p-splitter-panel",
/**
* Class name of the gutter element
*/
gutter = "p-splitter-gutter",
/**
* Class name of the handle element
*/
gutterHandle = "p-splitter-gutter-handle"
}
declare class SplitterStyle extends BaseStyle {
name: string;
style: string;
classes: {
root: ({ instance }: {
instance: any;
}) => string[];
panel: string;
gutter: string;
gutterHandle: string;
};
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SplitterStyle, never>;
static ɵprov: _angular_core.ɵɵInjectableDeclaration<SplitterStyle>;
}
interface SplitterStyle extends BaseStyle {
}
/**
* SplitterPanel is a helper component for Splitter, used to define a single resizable panel
* together with its size constraints (min/max size, collapsible behavior).
* @group Components
*/
declare class SplitterPanel extends BaseComponent<SplitterPanelPassThrough> {
componentName: string;
bindDirectiveInstance: Bind;
/**
* Initial size of the panel relative to 100%.
* @group Props
*/
size: _angular_core.InputSignalWithTransform<number | undefined, number | undefined>;
/**
* Minimum size of the panel relative to 100%.
* @defaultValue 0
* @group Props
*/
minSize: _angular_core.InputSignalWithTransform<number, unknown>;
/**
* Maximum size of the panel relative to 100%.
* @defaultValue 100
* @group Props
*/
maxSize: _angular_core.InputSignalWithTransform<number, unknown>;
/**
* When enabled, the panel can collapse below its `minSize` down to `collapsedSize`.
* @defaultValue false
* @group Props
*/
collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Size of the panel when collapsed, relative to 100%.
* @defaultValue 0
* @group Props
*/
collapsedSize: _angular_core.InputSignalWithTransform<number, unknown>;
/**
* @ignore
* Content of the panel, stamped by the parent Splitter into the panel wrapper.
*/
contentTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
/**
* @ignore
* `class`/`style` set directly on the `<p-splitterpanel>` element are forwarded by the parent
* Splitter onto the panel it renders, so authors can style the panel inline as expected.
*/
get hostClass(): string;
get hostStyle(): string | null;
_componentStyle: SplitterStyle;
onAfterViewChecked(): void;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SplitterPanel, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SplitterPanel, "p-splitterpanel, p-splitter-panel", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "minSize": { "alias": "minSize"; "required": false; "isSignal": true; }; "maxSize": { "alias": "maxSize"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "collapsedSize": { "alias": "collapsedSize"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof i1.Bind; inputs: {}; outputs: {}; }]>;
}
/**
* Runtime configuration of a panel, resolved either from a SplitterPanel component or from the
* array-based inputs (minSizes/panelSizes) for backward compatibility.
*/
interface SplitterPanelMeta {
minSize: number;
maxSize: number;
collapsible: boolean;
collapsedSize: number;
size: number | undefined;
}
interface SplitterPanelInfo extends SplitterPanelMeta {
index: number;
collapsed: boolean;
}
/**
* Splitter is utilized to separate and resize panels.
* @group Components
*/
declare class Splitter extends BaseComponent<SplitterPassThrough> {
componentName: string;
bindDirectiveInstance: Bind;
/**
* Style class of the component.
* @group Props
*/
styleClass: _angular_core.InputSignal<string | undefined>;
/**
* Style class of the panel.
* @group Props
*/
panelStyleClass: _angular_core.InputSignal<string | undefined>;
/**
* Inline style of the panel.
* @group Props
*/
panelStyle: _angular_core.InputSignal<CSSProperties>;
/**
* Defines where a stateful splitter keeps its state, valid values are 'session' for sessionStorage and 'local' for localStorage.
* @group Props
*/
stateStorage: _angular_core.InputSignal<SplitterStateStorage>;
/**
* Storage identifier of a stateful Splitter.
* @group Props
*/
stateKey: _angular_core.InputSignal<string | null>;
/**
* Orientation of the panels. Valid values are 'horizontal' and 'vertical'.
* @group Props
*/
layout: _angular_core.InputSignal<SplitterLayout>;
/**
* Size of the divider in pixels.
* @group Props
*/
gutterSize: _angular_core.InputSignalWithTransform<number, unknown>;
/**
* Step factor to increment/decrement the size of the panels while pressing the arrow keys.
* @group Props
*/
step: _angular_core.InputSignalWithTransform<number, unknown>;
/**
* Minimum size of the elements relative to 100%. Used when panels are defined via `#panel` templates;
* when SplitterPanel components are used, the per-panel `minSize` input takes precedence.
* @group Props
*/
minSizes: _angular_core.InputSignal<number[]>;
/**
* Size of the elements relative to 100%. Used when panels are defined via `#panel` templates;
* when SplitterPanel components are used, the per-panel `size` input takes precedence.
* @group Props
*/
panelSizes: _angular_core.InputSignal<number[]>;
/**
* When present, it disables the component and prevents resizing.
* @defaultValue false
* @group Props
*/
disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
/**
* Callback to invoke when resize ends.
* @param {SplitterResizeEndEvent} event - Custom panel resize end event
* @group Emits
*/
onResizeEnd: _angular_core.OutputEmitterRef<SplitterResizeEndEvent>;
/**
* Callback to invoke when resize starts.
* @param {SplitterResizeStartEvent} event - Custom panel resize start event
* @group Emits
*/
onResizeStart: _angular_core.OutputEmitterRef<SplitterResizeStartEvent>;
/**
* Callback to invoke continuously while a gutter is being dragged.
* @param {SplitterResizeEvent} event - Custom panel resize event
* @group Emits
*/
onResize: _angular_core.OutputEmitterRef<SplitterResizeEvent>;
/**
* Callback to invoke when a collapsible panel collapses or expands.
* @param {SplitterCollapseEvent} event - Custom collapse event
* @group Emits
*/
onCollapse: _angular_core.OutputEmitterRef<SplitterCollapseEvent>;
/**
* Panels declared via SplitterPanel components.
* @ignore
*/
panelComponents: _angular_core.Signal<readonly SplitterPanel[]>;
/**
* Panels declared via `<ng-template #panel>` (backward compatible API).
* @ignore
*/
panelChildren: _angular_core.Signal<readonly TemplateRef<void>[]>;
/**
* Resolved panel content templates, sourced from SplitterPanel components when present,
* otherwise from `#panel` templates.
*/
panels: _angular_core.Signal<TemplateRef<any>[]>;
/**
* Resolved per-panel configuration (min/max/collapsible/collapsedSize/size).
*/
panelMetas: _angular_core.Signal<SplitterPanelMeta[]>;
/**
* Value-based signature of the panel configuration. Lets the (re)initialization effect ignore
* array-literal input bindings that change identity but not value on every parent change detection.
*/
panelSignature: _angular_core.Signal<string>;
/**
* Class for each panel wrapper: the base panel class plus the splitter-level `panelStyleClass`
* and the `class` set directly on the matching SplitterPanel.
*/
panelClass: _angular_core.Signal<string[]>;
/**
* Inline style for each panel wrapper: the `style` set directly on the matching SplitterPanel,
* falling back to the splitter-level `panelStyle`.
*/
panelInlineStyle: _angular_core.Signal<(string | CSSProperties)[]>;
dragging: boolean;
isResizing: _angular_core.WritableSignal<boolean>;
resizingIndex: _angular_core.WritableSignal<number | null>;
collapsed: _angular_core.WritableSignal<boolean[]>;
/**
* Flex values applied to each panel wrapper, e.g. `35 1 0px`. Bound declaratively so panel sizing
* never depends on imperative DOM timing.
*/
panelFlex: _angular_core.WritableSignal<string[]>;
dataResizing: _angular_core.Signal<"" | null>;
pointerMoveListener: VoidListener;
pointerUpListener: VoidListener;
size: Nullable<number>;
gutterElement: Nullable<ElementRef | HTMLElement>;
startPos: Nullable<number>;
_panelSizes: number[];
panelRegistry: SplitterPanelInfo[];
initialSizes: number[];
initialCollapsed: boolean[];
reportedCollapsed: boolean[];
initialTotal: number;
prevPanelIndex: Nullable<number>;
timer: ReturnType<typeof setTimeout> | undefined;
prevSize: string | undefined;
_componentStyle: SplitterStyle;
rootClass: _angular_core.Signal<string>;
constructor();
onAfterViewChecked(): void;
buildPanelRegistry(): void;
initializePanels(): void;
updateFlex(): void;
syncCollapsedState(): void;
getPanelMinSize(index: number): number;
getPanelMaxSize(index: number): number;
resizeStart(event: PointerEvent | KeyboardEvent, index: number, isKeyDown?: boolean): void;
onResizeMove(event: PointerEvent | KeyboardEvent, step?: number, isKeyDown?: boolean): void;
distribute(newSizes: number[], growIdx: number, requested: number, isKeyDown: boolean | undefined, direction: 'forward' | 'backward'): void;
validatePanelSize(rawSize: number, info: SplitterPanelInfo | undefined, min: number, isKeyDown: boolean | undefined): {
size: number;
collapsed: boolean;
};
range(start: number, end: number, step: number): number[];
resizeEnd(event: PointerEvent | KeyboardEvent): void;
onGutterPointerDown(event: PointerEvent, index: number): void;
repeat(event: KeyboardEvent, index: number, step: number): void;
setTimer(event: KeyboardEvent, index: number, step: number): void;
clearTimer(): void;
onGutterKeyUp(event: KeyboardEvent): void;
onGutterKeyDown(event: KeyboardEvent, index: number): void;
bindPointerListeners(): void;
unbindPointerListeners(): void;
clear(): void;
isStateful(): boolean;
getStorage(): Storage | undefined;
saveState(): void;
restoreState(): boolean;
/**
* Resets the panel sizes using the stored state (for a stateful Splitter), the configured
* sizes, or the default equal distribution.
*/
resetState(): void;
gutterInlineStyle(): {
width: string;
'touch-action': string;
'user-select': string;
} | {
height: string;
'touch-action': string;
'user-select': string;
};
horizontal(): boolean;
round(value: number | undefined): number;
onDestroy(): void;
dataP: _angular_core.Signal<string>;
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Splitter, never>;
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Splitter, "p-splitter", never, { "styleClass": { "alias": "styleClass"; "required": false; "isSignal": true; }; "panelStyleClass": { "alias": "panelStyleClass"; "required": false; "isSignal": true; }; "panelStyle": { "alias": "panelStyle"; "required": false; "isSignal": true; }; "stateStorage": { "alias": "stateStorage"; "required": false; "isSignal": true; }; "stateKey": { "alias": "stateKey"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "gutterSize": { "alias": "gutterSize"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "minSizes": { "alias": "minSizes"; "required": false; "isSignal": true; }; "panelSizes": { "alias": "panelSizes"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "onResizeEnd": "onResizeEnd"; "onResizeStart": "onResizeStart"; "onResize": "onResize"; "onCollapse": "onCollapse"; }, ["panelComponents", "panelChildren"], never, true, [{ directive: typeof i1.Bind; inputs: {}; outputs: {}; }]>;
}
declare class SplitterModule {
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SplitterModule, never>;
static ɵmod: _angular_core.ɵɵNgModuleDeclaration<SplitterModule, never, [typeof Splitter, typeof SplitterPanel, typeof i3.SharedModule, typeof i1.BindModule], [typeof Splitter, typeof SplitterPanel, typeof i3.SharedModule, typeof i1.BindModule]>;
static ɵinj: _angular_core.ɵɵInjectorDeclaration<SplitterModule>;
}
export { Splitter, SplitterClasses, SplitterModule, SplitterPanel, SplitterStyle };