@ng-matero/extensions
Version:
Angular Material Extensions
258 lines (251 loc) • 13.4 kB
TypeScript
import { ThemePalette } from '@angular/material/core';
import * as i0 from '@angular/core';
import { OnInit, OnDestroy, ElementRef, AfterViewInit, EventEmitter, InjectionToken } from '@angular/core';
import * as i1 from '@angular/common';
import { Observable } from 'rxjs';
declare class MtxSplitPane implements OnInit, OnDestroy {
private ngZone;
private renderer;
private split;
elRef: ElementRef<any>;
/**
* Order of the area. Used to maintain the order of areas when toggling their visibility.
* Toggling area visibility without specifying an `order` leads to weird behavior.
*/
get order(): number | null;
set order(v: number | null);
private _order;
/**
* Size of the area in selected unit (percent/pixel).
* - Percent: All areas sizes should equal to `100`, If not, all areas will have the same size.
* - Pixel: An area with wildcard size (`size="*"`) is mandatory (only one) and
* can't have `visible="false"` or `minSize`/`maxSize`/`lockSize` properties.
*/
get size(): number | null;
set size(v: number | null);
private _size;
/** Minimum pixel or percent size, should be equal to or smaller than provided `size`. */
get minSize(): number | null;
set minSize(v: number | null);
private _minSize;
/** Maximum pixel or percent size, should be equal to or larger than provided `size`. */
get maxSize(): number | null;
set maxSize(v: number | null);
private _maxSize;
/** Lock area size, same as `minSize`=`maxSize`=`size`. */
get lockSize(): boolean;
set lockSize(v: boolean);
private _lockSize;
/** Hide area visually but still present in the DOM, use `ngIf` to completely remove it. */
get visible(): boolean;
set visible(v: boolean);
private _visible;
private transitionListener;
private readonly lockListeners;
constructor();
ngOnInit(): void;
setStyleOrder(value: number): void;
setStyleFlex(grow: number, shrink: number, basis: string, isMin: boolean, isMax: boolean): void;
lockEvents(): void;
unlockEvents(): void;
ngOnDestroy(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<MtxSplitPane, never>;
static ɵdir: i0.ɵɵDirectiveDeclaration<MtxSplitPane, "mtx-split-pane, [mtx-split-pane]", ["mtxSplitPane"], { "order": { "alias": "order"; "required": false; }; "size": { "alias": "size"; "required": false; }; "minSize": { "alias": "minSize"; "required": false; }; "maxSize": { "alias": "maxSize"; "required": false; }; "lockSize": { "alias": "lockSize"; "required": false; }; "visible": { "alias": "visible"; "required": false; }; }, {}, never, never, true, never>;
static ngAcceptInputType_lockSize: unknown;
static ngAcceptInputType_visible: unknown;
}
interface MtxSplitPoint {
x: number;
y: number;
}
interface MtxSplitArea {
component: MtxSplitPane;
order: number;
size: number | null;
minSize: number | null;
maxSize: number | null;
}
interface MtxSplitSnapshot {
gutterNum: number;
allAreasSizePixel: number;
allInvolvedAreasSizePercent: number;
lastSteppedOffset: number;
areasBeforeGutter: MtxSplitAreaSnapshot[];
areasAfterGutter: MtxSplitAreaSnapshot[];
}
interface MtxSplitAreaSnapshot {
area: MtxSplitArea;
sizePixelAtStart: number;
sizePercentAtStart: number;
}
interface MtxSplitSideAbsorptionCapacity {
remain: number;
list: MtxSplitAreaAbsorptionCapacity[];
}
interface MtxSplitAreaAbsorptionCapacity {
areaSnapshot: MtxSplitAreaSnapshot;
pixelAbsorb: number;
percentAfterAbsorption: number;
pixelRemain: number;
}
interface MtxSplitOutputData {
gutterNum: number;
sizes: MtxSplitOutputAreaSizes;
}
type MtxSplitOutputAreaSizes = (number | '*')[];
interface MtxSplitDefaultOptions {
color?: ThemePalette;
dir?: 'ltr' | 'rtl';
direction?: 'horizontal' | 'vertical';
unit?: 'percent' | 'pixel';
gutterDblClickDuration?: number;
gutterSize?: number;
gutterStep?: number;
restrictMove?: boolean;
useTransition?: boolean;
}
declare function getPointFromEvent(event: MouseEvent | TouchEvent): MtxSplitPoint | null;
declare function getElementPixelSize(elRef: ElementRef, direction: 'horizontal' | 'vertical'): number;
declare function getInputPositiveNumber<T>(v: any, defaultValue: T): number | T;
declare function isUserSizesValid(unit: 'percent' | 'pixel', sizes: number[]): boolean | number | void;
declare function getAreaMinSize(a: MtxSplitArea): null | number;
declare function getAreaMaxSize(a: MtxSplitArea): null | number;
declare function getGutterSideAbsorptionCapacity(unit: 'percent' | 'pixel', sideAreas: MtxSplitAreaSnapshot[], pixels: number, allAreasSizePixel: number): MtxSplitSideAbsorptionCapacity;
declare function getAreaAbsorptionCapacity(unit: 'percent' | 'pixel', areaSnapshot: MtxSplitAreaSnapshot, pixels: number, allAreasSizePixel: number): MtxSplitAreaAbsorptionCapacity | void;
declare function getAreaAbsorptionCapacityPercent(areaSnapshot: MtxSplitAreaSnapshot, pixels: number, allAreasSizePixel: number): MtxSplitAreaAbsorptionCapacity | void;
declare function getAreaAbsorptionCapacityPixel(areaSnapshot: MtxSplitAreaSnapshot, pixels: number, containerSizePixel: number): MtxSplitAreaAbsorptionCapacity | void;
declare function updateAreaSize(unit: 'percent' | 'pixel', item: MtxSplitAreaAbsorptionCapacity): void;
/** Injection token that can be used to specify default split options. */
declare const MTX_SPLIT_DEFAULT_OPTIONS: InjectionToken<MtxSplitDefaultOptions>;
/**
* mtx-split
*
*
* PERCENT MODE ([unit]="'percent'")
* ___________________________________________________________________________________________
* | A [g1] B [g2] C [g3] D [g4] E |
* |-------------------------------------------------------------------------------------------|
* | 20 30 20 15 15 | <-- [size]="x"
* | 10px 10px 10px 10px | <-- [gutterSize]="10"
* |calc(20% - 8px) calc(30% - 12px) calc(20% - 8px) calc(15% - 6px) calc(15% - 6px)| <-- CSS flex-basis property (with flex-grow&shrink at 0)
* | 152px 228px 152px 114px 114px | <-- el.getBoundingClientRect().width
* |___________________________________________________________________________________________|
* 800px <-- el.getBoundingClientRect().width
* flex-basis = calc( { area.size }% - { area.size/100 * nbGutter*gutterSize }px );
*
*
* PIXEL MODE ([unit]="'pixel'")
* ___________________________________________________________________________________________
* | A [g1] B [g2] C [g3] D [g4] E |
* |-------------------------------------------------------------------------------------------|
* | 100 250 * 150 100 | <-- [size]="y"
* | 10px 10px 10px 10px | <-- [gutterSize]="10"
* | 0 0 100px 0 0 250px 1 1 auto 0 0 150px 0 0 100px | <-- CSS flex property (flex-grow/flex-shrink/flex-basis)
* | 100px 250px 200px 150px 100px | <-- el.getBoundingClientRect().width
* |___________________________________________________________________________________________|
* 800px <-- el.getBoundingClientRect().width
*
*/
declare class MtxSplit implements AfterViewInit, OnDestroy {
private ngZone;
private elRef;
private cdRef;
private renderer;
protected _defaultOptions: MtxSplitDefaultOptions | null;
color: ThemePalette;
/** The split direction. */
get direction(): "horizontal" | "vertical";
set direction(v: 'horizontal' | 'vertical');
private _direction;
/** The unit you want to specify area sizes. */
get unit(): "percent" | "pixel";
set unit(v: 'percent' | 'pixel');
private _unit;
/** Gutters's size (dragging elements) in pixels. */
get gutterSize(): number;
set gutterSize(v: number);
private _gutterSize;
/** Gutter step while moving in pixels. */
get gutterStep(): number;
set gutterStep(v: number);
private _gutterStep;
/** Set to true if you want to limit gutter move to adjacent areas only. */
restrictMove: boolean;
/** Add transition when toggling visibility using `visible` or `size` changes. */
get useTransition(): boolean;
set useTransition(v: boolean);
private _useTransition;
/**
* Disable the dragging feature (remove cursor/image on gutters).
* `gutterClick`/`gutterDblClick` still emits.
*/
get disabled(): boolean;
set disabled(v: boolean);
private _disabled;
/** Indicates the directionality of the areas. */
get dir(): "ltr" | "rtl";
set dir(v: 'ltr' | 'rtl');
private _dir;
/**
* Milliseconds to detect a double click on a gutter. Set it around 300-500ms if
* you want to use `gutterDblClick` event.
*/
get gutterDblClickDuration(): number;
set gutterDblClickDuration(v: number);
private _gutterDblClickDuration;
/** Event emitted when drag starts. */
dragStart: EventEmitter<MtxSplitOutputData>;
/** Event emitted when drag ends. */
dragEnd: EventEmitter<MtxSplitOutputData>;
/** Event emitted when user clicks on a gutter. */
gutterClick: EventEmitter<MtxSplitOutputData>;
/** Event emitted when user double clicks on a gutter. */
gutterDblClick: EventEmitter<MtxSplitOutputData>;
/**
* Event emitted when transition ends (could be triggered from `visible` or `size` changes).
* Only if `useTransition` equals true.
*/
get transitionEnd(): Observable<MtxSplitOutputAreaSizes>;
private transitionEndSubscriber;
private dragProgressSubject;
dragProgress$: Observable<MtxSplitOutputData>;
private isDragging;
private dragListeners;
private snapshot;
private startPoint;
private endPoint;
readonly displayedAreas: MtxSplitArea[];
private readonly hidedAreas;
private gutterEls;
constructor();
ngAfterViewInit(): void;
private getNbGutters;
addArea(component: MtxSplitPane): void;
removeArea(component: MtxSplitPane): void;
updateArea(component: MtxSplitPane, resetOrders: boolean, resetSizes: boolean): void;
showArea(component: MtxSplitPane): void;
hideArea(comp: MtxSplitPane): void;
getVisibleAreaSizes(): MtxSplitOutputAreaSizes;
setVisibleAreaSizes(sizes: MtxSplitOutputAreaSizes): boolean;
private build;
private refreshStyleSizes;
_clickTimeout: number | null;
clickGutter(event: MouseEvent | TouchEvent, gutterNum: number): void;
startDragging(event: MouseEvent | TouchEvent, gutterOrder: number, gutterNum: number): void;
private dragEvent;
private stopDragging;
notify(type: 'start' | 'progress' | 'end' | 'click' | 'dblclick' | 'transitionEnd', gutterNum: number): void;
ngOnDestroy(): void;
static ɵfac: i0.ɵɵFactoryDeclaration<MtxSplit, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<MtxSplit, "mtx-split", ["mtxSplit"], { "color": { "alias": "color"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "unit": { "alias": "unit"; "required": false; }; "gutterSize": { "alias": "gutterSize"; "required": false; }; "gutterStep": { "alias": "gutterStep"; "required": false; }; "restrictMove": { "alias": "restrictMove"; "required": false; }; "useTransition": { "alias": "useTransition"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "dir": { "alias": "dir"; "required": false; }; "gutterDblClickDuration": { "alias": "gutterDblClickDuration"; "required": false; }; }, { "dragStart": "dragStart"; "dragEnd": "dragEnd"; "gutterClick": "gutterClick"; "gutterDblClick": "gutterDblClick"; "transitionEnd": "transitionEnd"; }, never, ["*"], true, never>;
static ngAcceptInputType_restrictMove: unknown;
static ngAcceptInputType_useTransition: unknown;
static ngAcceptInputType_disabled: unknown;
}
declare class MtxSplitModule {
static ɵfac: i0.ɵɵFactoryDeclaration<MtxSplitModule, never>;
static ɵmod: i0.ɵɵNgModuleDeclaration<MtxSplitModule, never, [typeof i1.CommonModule, typeof MtxSplit, typeof MtxSplitPane], [typeof MtxSplit, typeof MtxSplitPane]>;
static ɵinj: i0.ɵɵInjectorDeclaration<MtxSplitModule>;
}
export { MTX_SPLIT_DEFAULT_OPTIONS, MtxSplit, MtxSplitModule, MtxSplitPane, getAreaAbsorptionCapacity, getAreaAbsorptionCapacityPercent, getAreaAbsorptionCapacityPixel, getAreaMaxSize, getAreaMinSize, getElementPixelSize, getGutterSideAbsorptionCapacity, getInputPositiveNumber, getPointFromEvent, isUserSizesValid, updateAreaSize };
export type { MtxSplitArea, MtxSplitAreaAbsorptionCapacity, MtxSplitAreaSnapshot, MtxSplitDefaultOptions, MtxSplitOutputAreaSizes, MtxSplitOutputData, MtxSplitPoint, MtxSplitSideAbsorptionCapacity, MtxSplitSnapshot };