@progress/kendo-angular-layout
Version:
Kendo UI for Angular Layout Package - a collection of components to create professional application layoyts
122 lines (121 loc) • 4.47 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 { AfterViewInit, ElementRef, NgZone, OnChanges, OnDestroy, Renderer2, SimpleChanges } from '@angular/core';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { TileLayoutDraggingService } from './dragging-service';
import { TileLayoutKeyboardNavigationService } from './keyboard-navigation.service';
import * as i0 from "@angular/core";
/**
* Represents a tile item within the TileLayoutComponent.
*
* @example
* ```html
* <kendo-tilelayout>
* <kendo-tilelayout-item [title]="'Item 1'" [colSpan]="2">
* <p>Item content goes here</p>
* </kendo-tilelayout-item>
* </kendo-tilelayout>
* ```
* @remarks
* Supported children components are: {@link TileLayoutItemBodyComponent}, {@link TileLayoutItemHeaderComponent}.
*/
export declare class TileLayoutItemComponent implements AfterViewInit, OnDestroy, OnChanges {
elem: ElementRef;
private zone;
private renderer;
private localization;
private draggingService;
private keyboardNavigationService;
/**
* Sets the title text that appears in the item header ([see example]({% slug tiles_tilelayout %}#toc-tiles-configuration)).
*/
title: string;
/**
* Sets how many rows the tile item spans ([see example](slug:resizing_tilelayout#programmatic-resizing)).
* @default 1
*/
rowSpan: number;
/**
* Sets how many columns the tile item spans ([see example](slug:resizing_tilelayout#programmatic-resizing)).
* @default 1
*/
colSpan: number;
/**
* Sets the order of the tile item within the TileLayout.
* When not set, items receive increasing order values based on their DOM position.
*/
set order(value: number);
get order(): number;
/**
* Sets the starting column position of the item ([see example](slug:tiles_tilelayout#size-and-position)).
*/
col: number;
/**
* Sets the starting row position of the item ([see example](slug:tiles_tilelayout#size-and-position)).
*/
row: number;
/**
* Enables or disables individual item reordering.
*
* @default true
*/
reorderable: boolean;
/**
* Enables or disables individual item resizing.
* @default true
*/
resizable: boolean;
itemClass: boolean;
hostRole: string;
get hostDropEffect(): string;
get hostTabindex(): string;
get ariaKeyShortcuts(): string;
get hostGrabbed(): boolean;
get hostLabelledBy(): string;
get colEnd(): string;
get rowEnd(): string;
get colStart(): string;
get rowStart(): string;
/**
* @hidden
*/
get isReorderable(): boolean;
/**
* @hidden
*/
get isNavigable(): boolean;
/**
* @hidden
*/
get isResizable(): boolean;
/**
* @hidden
*/
resizeDirections: Array<string>;
/**
* @hidden
*/
rtl: boolean;
private headers;
/**
* @hidden
*/
titleId: string;
private subs;
private keyboardNavigationSubs;
private focusableItems;
private _order;
constructor(elem: ElementRef, zone: NgZone, renderer: Renderer2, localization: LocalizationService, draggingService: TileLayoutDraggingService, keyboardNavigationService: TileLayoutKeyboardNavigationService);
ngAfterViewInit(): void;
ngOnChanges(changes: SimpleChanges): void;
ngOnDestroy(): void;
/**
* @hidden
*/
focus(): void;
private toggleCursorClass;
static ɵfac: i0.ɵɵFactoryDeclaration<TileLayoutItemComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<TileLayoutItemComponent, "kendo-tilelayout-item", never, { "title": { "alias": "title"; "required": false; }; "rowSpan": { "alias": "rowSpan"; "required": false; }; "colSpan": { "alias": "colSpan"; "required": false; }; "order": { "alias": "order"; "required": false; }; "col": { "alias": "col"; "required": false; }; "row": { "alias": "row"; "required": false; }; "reorderable": { "alias": "reorderable"; "required": false; }; "resizable": { "alias": "resizable"; "required": false; }; }, {}, ["headers"], ["*"], true, never>;
}