@progress/kendo-angular-layout
Version:
Kendo UI for Angular Layout Package - a collection of components to create professional application layoyts
129 lines (128 loc) • 6.16 kB
TypeScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { EventEmitter, QueryList, SimpleChanges, ElementRef, Renderer2, NgZone, OnInit, AfterViewInit, OnDestroy, AfterContentInit, OnChanges } from '@angular/core';
import { TileLayoutDraggingService } from './dragging-service';
import { TileLayoutResizeEvent } from './resize-event';
import { TileLayoutItemComponent } from './tilelayout-item.component';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { TileLayoutReorderEvent } from './reorder-event';
import { TileLayoutGap } from './models/gap.interface';
import { TileLayoutFlowMode } from './models/flowmode.type';
import { TileLayoutKeyboardNavigationService } from './keyboard-navigation.service';
import * as i0 from "@angular/core";
/**
* Represents the [Kendo UI TileLayout component for Angular]({% slug overview_tilelayout %})
*/
export declare class TileLayoutComponent implements OnInit, AfterViewInit, AfterContentInit, OnDestroy, OnChanges {
private zone;
private elem;
private renderer;
private localization;
private draggingService;
private navigationService;
/**
* Defines the number of columns ([see example](slug:tiles_tilelayout#size-and-position)).
* @default 1
*/
columns: number;
/**
* Determines the width of the columns. Numeric values are treated as pixels ([see example](slug:tiles_tilelayout#size-and-position)).
* @default '1fr'
*/
columnWidth: string | number;
/**
* The numeric values which determine the spacing in pixels between the layout items horizontally and vertically.
* Properties:
* * rows - the vertical spacing. Numeric values are treated as pixels. Defaults to `16`.
* * columns - the horizontal spacing. Numeric values are treated as pixels. Defaults to `16`.
*
* When bound to a single numeric value, it will be set to both `rows` and `columns` properties.
*/
set gap(value: TileLayoutGap | number);
get gap(): TileLayoutGap | number;
/**
* Determines whether the reordering functionality will be enabled ([see example]({% slug reordering_tilelayout %})).
* @default false
*/
reorderable: boolean;
/**
* Determines whether the resizing functionality will be enabled ([see example]({% slug resizing_tilelayout %})).
* @default false
*/
resizable: boolean;
/**
* Determines the height of the rows. Numeric values are treated as pixels ([see example](slug:tiles_tilelayout#size-and-position)).
* @default '1fr'
*/
rowHeight: string | number;
/**
* Controls how the auto-placement algorithm works, specifying exactly how auto-placed items are flowed in the TileLayout ([see example]({% slug tiles_autoflow_tilelayout %})).
* For further reference, check the [grid-auto-flow CSS article](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow).
*
* The possible values are:
* * (Default) `column`
* * `row`
* * `row dense`
* * `column dense`
* * `none`
*
*/
autoFlow: TileLayoutFlowMode;
/**
* If set to true, the user can use dedicated shortcuts to interact with the TileLayout.
* By default, navigation is disabled and focusable TileLayout content is a part of the natural tab sequence of the page.
*
* @default false
*/
navigable: boolean;
/**
* Fires when the user completes the reordering of the item ([see example]({% slug reordering_tilelayout %})).
* This event is preventable. If you cancel it, the item will not be reordered.
*/
reorder: EventEmitter<TileLayoutReorderEvent>;
/**
* Fires when the user completes the resizing of the item ([see example]({% slug resizing_tilelayout %})).
* This event is preventable. If you cancel it, the item will not be resized.
*/
resize: EventEmitter<TileLayoutResizeEvent>;
hostClass: boolean;
hostRole: string;
get gapStyle(): string;
direction: 'ltr' | 'rtl';
get currentColStart(): string;
get currentRowStart(): string;
get draggedItemWrapper(): HTMLElement;
get targetOrder(): number;
/**
* A query list of all declared [TileLayoutItemComponent]({% slug api_layout_tilelayoutitemcomponent %}) items.
*/
items: QueryList<TileLayoutItemComponent>;
private hint;
/**
* @hidden
*/
showLicenseWatermark: boolean;
private draggable;
private subs;
private _gap;
constructor(zone: NgZone, elem: ElementRef, renderer: Renderer2, localization: LocalizationService, draggingService: TileLayoutDraggingService, navigationService: TileLayoutKeyboardNavigationService);
ngOnInit(): void;
ngAfterViewInit(): void;
ngAfterContentInit(): void;
ngOnChanges(changes: SimpleChanges): void;
ngOnDestroy(): void;
private handlePress;
private handleDrag;
private handleRelease;
private applyColStyling;
private applyRowStyling;
private draggingServiceConfig;
private initializeDraggable;
private applyAutoFlow;
private setItemsOrder;
private onFocusIn;
static ɵfac: i0.ɵɵFactoryDeclaration<TileLayoutComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<TileLayoutComponent, "kendo-tilelayout", never, { "columns": { "alias": "columns"; "required": false; }; "columnWidth": { "alias": "columnWidth"; "required": false; }; "gap": { "alias": "gap"; "required": false; }; "reorderable": { "alias": "reorderable"; "required": false; }; "resizable": { "alias": "resizable"; "required": false; }; "rowHeight": { "alias": "rowHeight"; "required": false; }; "autoFlow": { "alias": "autoFlow"; "required": false; }; "navigable": { "alias": "navigable"; "required": false; }; }, { "reorder": "reorder"; "resize": "resize"; }, ["items"], ["*"], true, never>;
}