ng-zorro-antd/splitter/index.d.ts

An enterprise-class UI components based on Ant Design and Angular

import * as _angular_cdk_bidi from '@angular/cdk/bidi';
import { Directionality } from '@angular/cdk/bidi';
import * as _angular_core from '@angular/core';
import { TemplateRef, ElementRef } from '@angular/core';
import { NzResizeObserver } from 'ng-zorro-antd/cdk/resize-observer';
import { NzDestroyService } from 'ng-zorro-antd/core/services';

/**
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
 */
type NzSplitterLayout = 'horizontal' | 'vertical';
type NzSplitterCollapsible = boolean | NzSplitterCollapseOption;
interface NzSplitterCollapseOption {
    start?: boolean;
    end?: boolean;
}

declare class NzSplitterPanelComponent {
    readonly nzDefaultSize: _angular_core.InputSignal<string | number | undefined>;
    readonly nzMin: _angular_core.InputSignal<string | number | undefined>;
    readonly nzMax: _angular_core.InputSignal<string | number | undefined>;
    readonly nzSize: _angular_core.InputSignal<string | number | undefined>;
    readonly nzCollapsible: _angular_core.InputSignal<NzSplitterCollapsible>;
    readonly nzResizable: _angular_core.InputSignalWithTransform<boolean, unknown>;
    readonly contentTemplate: _angular_core.Signal<TemplateRef<void>>;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NzSplitterPanelComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NzSplitterPanelComponent, "nz-splitter-panel", ["nzSplitterPanel"], { "nzDefaultSize": { "alias": "nzDefaultSize"; "required": false; "isSignal": true; }; "nzMin": { "alias": "nzMin"; "required": false; "isSignal": true; }; "nzMax": { "alias": "nzMax"; "required": false; "isSignal": true; }; "nzSize": { "alias": "nzSize"; "required": false; "isSignal": true; }; "nzCollapsible": { "alias": "nzCollapsible"; "required": false; "isSignal": true; }; "nzResizable": { "alias": "nzResizable"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
}

interface PanelSize {
    size: string | number | undefined;
    postPxSize: number;
    percentage: number;
    min: string | number | undefined;
    max: string | number | undefined;
    postPercentMinSize: number;
    postPercentMaxSize: number;
}
interface ResizableInfo {
    resizable: boolean;
    collapsible: Required<NzSplitterCollapseOption>;
}
declare class NzSplitterComponent {
    /** ------------------- Props ------------------- */
    readonly nzLayout: _angular_core.InputSignal<NzSplitterLayout>;
    readonly nzLazy: _angular_core.InputSignalWithTransform<boolean, unknown>;
    readonly nzResizeStart: _angular_core.OutputEmitterRef<number[]>;
    readonly nzResize: _angular_core.OutputEmitterRef<number[]>;
    readonly nzResizeEnd: _angular_core.OutputEmitterRef<number[]>;
    protected readonly destroy$: NzDestroyService;
    protected readonly elementRef: ElementRef<HTMLElement>;
    protected readonly directionality: Directionality;
    protected readonly resizeObserver: NzResizeObserver;
    protected readonly document: Document;
    protected readonly dir: _angular_core.Signal<_angular_cdk_bidi.Direction>;
    /** ------------------- Panels ------------------- */
    protected readonly panels: _angular_core.Signal<readonly NzSplitterPanelComponent[]>;
    protected readonly panelProps: _angular_core.Signal<{
        defaultSize: string | number | undefined;
        size: string | number | undefined;
        min: string | number | undefined;
        max: string | number | undefined;
        resizable: boolean;
        collapsible: NzSplitterCollapseOption;
        contentTemplate: _angular_core.TemplateRef<void>;
    }[]>;
    /** ------------------- Sizes ------------------- */
    /**
     * Observe the size of the container.
     */
    private readonly containerBox;
    /**
     * The size of the container, used to calculate the percentage size and flex basis of each panel.
     */
    protected readonly containerSize: _angular_core.Signal<number>;
    /**
     * Derived from defaultSize of each panel.
     * After that it will be updated by the resize event with **real** size in pixels.
     */
    protected readonly innerSizes: _angular_core.WritableSignal<(string | number | undefined)[]>;
    /**
     * Calculate the size of each panel based on the container size and the percentage size.
     */
    protected readonly sizes: _angular_core.Signal<PanelSize[]>;
    protected readonly ariaInfos: _angular_core.Signal<{
        ariaNow: number;
        ariaMin: number;
        ariaMax: number;
    }[]>;
    private getPxSizes;
    /** ------------------ Resize ------------------ */
    /**
     * The index of the panel that is being resized.
     * @note Mark the moving splitter bar as activated to show the dragging effect even if the mouse is outside the
     * splitter container.
     */
    protected readonly movingIndex: _angular_core.WritableSignal<{
        index: number;
        confirmed: boolean;
    } | null>;
    /**
     * The offset of preview position (lazy mode) when dragging the splitter bar.
     * Constrained by the min and max size of the target panel.
     */
    protected readonly constrainedOffset: _angular_core.WritableSignal<number>;
    /**
     * The resizable information of each splitter bar.
     */
    protected readonly resizableInfos: _angular_core.Signal<ResizableInfo[]>;
    /**
     * Handle the resize start event for the specified panel.
     * @param index The index of the panel.
     * @param startPos The start position of the resize event.
     */
    protected startResize(index: number, startPos: [x: number, y: number]): void;
    /**
     * Update the sizes of specified panels based on the move offset.
     * @param index The index of the panel.
     * @param offset The move offset in pixels.
     */
    private updateOffset;
    /** ------------------ Resize ------------------ */
    /**
     * Record the original size of the collapsed panel.
     * Used to restore the size when the panel is expanded back.
     */
    private readonly cacheCollapsedSize;
    /**
     * Collapse the specified panel.
     * @param index The index of the panel to collapse.
     * @param type The type of collapse, either `start` or `end`.
     */
    protected collapse(index: number, type: 'start' | 'end'): void;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NzSplitterComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NzSplitterComponent, "nz-splitter", ["nzSplitter"], { "nzLayout": { "alias": "nzLayout"; "required": false; "isSignal": true; }; "nzLazy": { "alias": "nzLazy"; "required": false; "isSignal": true; }; }, { "nzResizeStart": "nzResizeStart"; "nzResize": "nzResize"; "nzResizeEnd": "nzResizeEnd"; }, ["panels"], never, true, never>;
}

declare class NzSplitterModule {
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NzSplitterModule, never>;
    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<NzSplitterModule, never, [typeof NzSplitterComponent, typeof NzSplitterPanelComponent], [typeof NzSplitterComponent, typeof NzSplitterPanelComponent]>;
    static ɵinj: _angular_core.ɵɵInjectorDeclaration<NzSplitterModule>;
}

export { NzSplitterComponent, NzSplitterModule, NzSplitterPanelComponent };
export type { NzSplitterCollapseOption, NzSplitterCollapsible, NzSplitterLayout };