@appnest/masonry-layout/masonry-layout.d.ts

An efficient and fast web component that gives you a beautiful masonry layout

declare type ResizeObserverEntries = {
    contentRect: {
        width: number;
        height: number;
    };
}[];
/**
 * Masonry layout web component. It places the slotted elements in the optimal position based
 * on the available vertical space, just like mason fitting stones in a wall.
 * @example <masonry-layout><div class="item"></div><div class="item"></div></masonry-layout>
 * @csspart column - Each column of the masonry layout.
 * @csspart column-index - The specific column at the given index (eg. column-0 would target the first column and so on)
 * @slot - Items that should be distributed in the layout.
 */
export declare class MasonryLayout extends HTMLElement {
    static get observedAttributes(): string[];
    /**
     * The maximum width of each column if cols are set to auto.
     * @attr maxcolwidth
     * @param v
     */
    set maxColWidth(v: number);
    get maxColWidth(): number;
    /**
     * The amount of columns.
     * @attr cols
     * @param v
     */
    set cols(v: number | "auto");
    get cols(): number | "auto";
    /**
     * The gap in pixels between the columns.
     * @attr gap
     * @param v
     */
    set gap(v: number);
    get gap(): number;
    /**
     * The ms of debounce when the element resizes.
     * @attr debounce
     * @param v
     */
    set debounce(v: number);
    get debounce(): number;
    /**
     * The column elements.
     */
    private get $columns();
    private debounceId;
    private $unsetElementsSlot;
    private ro;
    private currentRequestAnimationFrameCallback;
    /**
     * Attach the shadow DOM.
     */
    constructor();
    /**
     * Hook up event listeners when added to the DOM.
     */
    connectedCallback(): void;
    /**
     * Remove event listeners when removed from the DOM.
     */
    disconnectedCallback(): void;
    /**
     * Updates the layout when one of the observed attributes changes.
     */
    attributeChangedCallback(name: string): void;
    /**
     *
     */
    onSlotChange(): void;
    /**
     * Each time the element resizes we need to schedule a layout
     * if the amount available columns has has changed.
     * @param entries
     */
    onResize(entries?: ResizeObserverEntries): void;
    /**
     * Render X amount of columns.
     * @param colCount
     */
    renderCols(colCount: number): void;
    /**
     * Schedules a layout.
     * @param ms
     */
    scheduleLayout(ms?: number): void;
    /**
     * Layouts the elements.
     */
    layout(): void;
}
declare global {
    interface HTMLElementTagNameMap {
        "masonry-layout": MasonryLayout;
    }
}
export {};