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
* @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. */ declare class MasonryLayout extends HTMLElement { // The observed attributes. // Whenever one of these changes we need to update the layout. 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(); // Unique debounce ID so different masonry layouts on one page won't affect eachother private debounceId; // Reference to the default slot element private $unsetElementsSlot; // Resize observer that layouts when necessary private ro; // The current request animation frame callback 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 { MasonryLayout };