@katoid/angular-grid-layout/lib/grid.component.d.ts

Grid Layout with draggable and resizable items for Angular

import { AfterContentChecked, AfterContentInit, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, QueryList, Renderer2, SimpleChanges, ViewContainerRef } from '@angular/core';
import { NumberInput } from './coercion/number-property';
import { KtdGridItemComponent } from './grid-item/grid-item.component';
import { KtdGridBackgroundCfg, KtdGridCfg, KtdGridCompactType, KtdGridItemRenderData, KtdGridLayout, KtdGridLayoutItem } from './grid.definitions';
import { KtdDictionary } from '../types';
import { KtdGridService } from './grid.service';
import { BooleanInput } from './coercion/boolean-property';
import * as i0 from "@angular/core";
interface KtdDragResizeEvent {
    layout: KtdGridLayout;
    layoutItem: KtdGridLayoutItem;
    gridItemRef: KtdGridItemComponent;
}
export type KtdDragStart = KtdDragResizeEvent;
export type KtdResizeStart = KtdDragResizeEvent;
export type KtdDragEnd = KtdDragResizeEvent;
export type KtdResizeEnd = KtdDragResizeEvent;
export interface KtdGridItemResizeEvent {
    width: number;
    height: number;
    gridItemRef: KtdGridItemComponent;
}
export declare function parseRenderItemToPixels(renderItem: KtdGridItemRenderData<number>): KtdGridItemRenderData<string>;
export declare function __gridItemGetRenderDataFactoryFunc(gridCmp: KtdGridComponent): (id: string) => KtdGridItemRenderData<string>;
export declare function ktdGridItemGetRenderDataFactoryFunc(gridCmp: KtdGridComponent): (id: string) => KtdGridItemRenderData<string>;
export declare class KtdGridComponent implements OnChanges, AfterContentInit, AfterContentChecked, OnDestroy {
    private gridService;
    private elementRef;
    private viewContainerRef;
    private renderer;
    private ngZone;
    private document;
    /** Query list of grid items that are being rendered. */
    _gridItems: QueryList<KtdGridItemComponent>;
    /** Emits when layout change */
    layoutUpdated: EventEmitter<KtdGridLayout>;
    /** Emits when drag starts */
    dragStarted: EventEmitter<KtdDragStart>;
    /** Emits when resize starts */
    resizeStarted: EventEmitter<KtdResizeStart>;
    /** Emits when drag ends */
    dragEnded: EventEmitter<KtdDragEnd>;
    /** Emits when resize ends */
    resizeEnded: EventEmitter<KtdResizeEnd>;
    /** Emits when a grid item is being resized and its bounds have changed */
    gridItemResize: EventEmitter<KtdGridItemResizeEvent>;
    /**
     * Parent element that contains the scroll. If an string is provided it would search that element by id on the dom.
     * If no data provided or null autoscroll is not performed.
     */
    scrollableParent: HTMLElement | Document | string | null;
    /** Whether or not to update the internal layout when some dependent property change. */
    get compactOnPropsChange(): boolean;
    set compactOnPropsChange(value: boolean);
    private _compactOnPropsChange;
    /** If true, grid items won't change position when being dragged over. Handy when using no compaction */
    get preventCollision(): boolean;
    set preventCollision(value: boolean);
    private _preventCollision;
    /** Number of CSS pixels that would be scrolled on each 'tick' when auto scroll is performed. */
    get scrollSpeed(): number;
    set scrollSpeed(value: number);
    private _scrollSpeed;
    /** Type of compaction that will be applied to the layout (vertical, horizontal or free). Defaults to 'vertical' */
    get compactType(): KtdGridCompactType;
    set compactType(val: KtdGridCompactType);
    private _compactType;
    /**
     * Row height as number or as 'fit'.
     * If rowHeight is a number value, it means that each row would have those css pixels in height.
     * if rowHeight is 'fit', it means that rows will fit in the height available. If 'fit' value is set, a 'height' should be also provided.
     */
    get rowHeight(): number | 'fit';
    set rowHeight(val: number | 'fit');
    private _rowHeight;
    /** Number of columns  */
    get cols(): number;
    set cols(val: number);
    private _cols;
    /** Layout of the grid. Array of all the grid items with its 'id' and position on the grid. */
    get layout(): KtdGridLayout;
    set layout(layout: KtdGridLayout);
    private _layout;
    /** Grid gap in css pixels */
    get gap(): number;
    set gap(val: number);
    private _gap;
    /**
     * If height is a number, fixes the height of the grid to it, recommended when rowHeight = 'fit' is used.
     * If height is null, height will be automatically set according to its inner grid items.
     * Defaults to null.
     * */
    get height(): number | null;
    set height(val: number | null);
    private _height;
    get backgroundConfig(): KtdGridBackgroundCfg | null;
    set backgroundConfig(val: KtdGridBackgroundCfg | null);
    private _backgroundConfig;
    private gridCurrentHeight;
    get config(): KtdGridCfg;
    /** Reference to the view of the placeholder element. */
    private placeholderRef;
    /** Element that is rendered as placeholder when a grid item is being dragged */
    private placeholder;
    private _gridItemsRenderData;
    private subscriptions;
    constructor(gridService: KtdGridService, elementRef: ElementRef, viewContainerRef: ViewContainerRef, renderer: Renderer2, ngZone: NgZone, document: Document);
    ngOnChanges(changes: SimpleChanges): void;
    ngAfterContentInit(): void;
    ngAfterContentChecked(): void;
    resize(): void;
    ngOnDestroy(): void;
    compactLayout(): void;
    getItemsRenderData(): KtdDictionary<KtdGridItemRenderData<number>>;
    getItemRenderData(itemId: string): KtdGridItemRenderData<number>;
    calculateRenderData(): void;
    render(): void;
    private setBackgroundCssVariables;
    private updateGridItemsStyles;
    private setGridBackgroundVisible;
    private initSubscriptions;
    /**
     * Perform a general grid drag action, from start to end. A general grid drag action basically includes creating the placeholder element and adding
     * some class animations. calcNewStateFunc needs to be provided in order to calculate the new state of the layout.
     * @param gridItem that is been dragged
     * @param pointerDownEvent event (mousedown or touchdown) where the user initiated the drag
     * @param calcNewStateFunc function that return the new layout state and the drag element position
     */
    private performDragSequence$;
    /**
     * It adds the `ktd-grid-item-animating` class and removes it when the animated transition is complete.
     * This function is meant to be executed when the drag has ended.
     * @param gridItem that has been dragged
     */
    private addGridItemAnimatingClass;
    /** Creates placeholder element */
    private createPlaceholderElement;
    /** Destroys the placeholder element and its ViewRef. */
    private destroyPlaceholder;
    static ngAcceptInputType_cols: NumberInput;
    static ngAcceptInputType_rowHeight: NumberInput;
    static ngAcceptInputType_scrollSpeed: NumberInput;
    static ngAcceptInputType_compactOnPropsChange: BooleanInput;
    static ngAcceptInputType_preventCollision: BooleanInput;
    static ɵfac: i0.ɵɵFactoryDeclaration<KtdGridComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<KtdGridComponent, "ktd-grid", never, { "scrollableParent": { "alias": "scrollableParent"; "required": false; }; "compactOnPropsChange": { "alias": "compactOnPropsChange"; "required": false; }; "preventCollision": { "alias": "preventCollision"; "required": false; }; "scrollSpeed": { "alias": "scrollSpeed"; "required": false; }; "compactType": { "alias": "compactType"; "required": false; }; "rowHeight": { "alias": "rowHeight"; "required": false; }; "cols": { "alias": "cols"; "required": false; }; "layout": { "alias": "layout"; "required": false; }; "gap": { "alias": "gap"; "required": false; }; "height": { "alias": "height"; "required": false; }; "backgroundConfig": { "alias": "backgroundConfig"; "required": false; }; }, { "layoutUpdated": "layoutUpdated"; "dragStarted": "dragStarted"; "resizeStarted": "resizeStarted"; "dragEnded": "dragEnded"; "resizeEnded": "resizeEnded"; "gridItemResize": "gridItemResize"; }, ["_gridItems"], ["*"], true, never>;
}
export {};