/** * @license *------------------------------------------------------------------------------------------- * Copyright © 2026 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the package root for more information *------------------------------------------------------------------------------------------- */ /** * The interface for describing items that can be passed to the `items` property of the TileLayout component. */ export interface TileLayoutItem { /** * The position which is used when the TileLayout is in uncontrolled mode * ([see example]({% slug tiles_position_dimensions_tilelayout %})). */ defaultPosition?: TilePosition; /** * Sets additional styles to the TileLayoutItem. */ style?: object; /** * Sets additional classes to the TileLayoutItem. */ class?: string; /** * The tile object. */ tile?: object; /** * Sets additional CSS styles to the TileLayoutItem hint element. */ hintStyle?: object; /** * Sets additional classes to the TileLayoutItem hint element. */ hintClass?: string; /** * Sets the title in the TileLayoutItem's header content * ([see example]({% slug tiles_position_dimensions_tilelayout %})). */ header?: any; /** * Sets the title in the TileLayoutItem's header text * ([see example]({% slug tiles_position_dimensions_tilelayout %})). */ headerText?: string; /** * Sets the content in TileLayoutItem's body content * ([see example]({% slug tiles_position_dimensions_tilelayout %})). */ body?: any; /** * Sets the content in TileLayoutItem's body text * ([see example]({% slug tiles_position_dimensions_tilelayout %})). */ bodyText?: string; /** * Overrides the default rendering of the TileLayoutItem * ([see example]({% slug tiles_custom_rendering_tilelayout %})). */ item?: any; /** * Specifies the id of each Tile if needed to be user-defined. By default the id is automatically generated. */ id?: any; /** * Specifies if the user is allowed to resize the TileLayoutItem and in which direction * ([see example]({% slug tiles_resizing_tilelayout %})). * If `resizable` is not specified, the resizing of the TileLayoutItem will be enabled for both directions. */ resizable?: TileResizeMode | string | boolean; /** * Specifies if the user is allowed to reorder the TileLayoutItem by dragging and dropping it * ([see example]({% slug tiles_reordering_tilelayout %})). * If `reorderable` is not specified, the dragging functionality of the TileLayoutItem will be enabled. */ reorderable?: boolean; /** * Specifies if the tabIndex of each TileLayout tile if the scenario requires it. Defaults to `0`. */ tabIndex?: number; } /** * Specifies the position of each tile. */ export interface TilePosition { /** * Defines the order index of the TileLayoutItem. * If not set, items will receive a sequential order. */ order?: number; /** * (Required) Defines on which column-line the TileLayoutItem will start. * It is required in order reordering and resizing functionalities to work as expected as they rely on it. */ col: number; /** * Specifies how many columns will the TileLayoutItem spans. * Defaults to `1`. */ colSpan?: number; /** * Defines on which row-line the TileLayoutItem will start. */ row?: number; /** * Specifies how many rows will the TileLayoutItem spans. * Defaults to `1`. */ rowSpan?: number; } /** * Specifies the strict position of each tile. * Used in the [TileLayoutRepositionEvent]({% slug api_layout_tilelayoutrepositionevent %}). */ export interface TileStrictPosition extends TilePosition { /** * Defines the order index of the TileLayoutItem. * If not set, items will receive a sequential order. */ order: number; /** * Specifies how many rows will the TileLayoutItem spans. * Defaults to `1`. */ rowSpan: number; /** * Specifies how many columns will the TileLayoutItem spans. * Defaults to `1`. */ colSpan: number; } /** * Specifies if the user is allowed to resize the TileLayoutItem and in which direction * ([see example]({% slug tiles_resizing_tilelayout %})). * If `resizable` is not specified, the resizing of the TileLayoutItem will be enabled for both directions. */ export type TileResizeMode = 'horizontal' | 'vertical' | boolean; /** * Specifies the gaps between the tiles. */ export interface TileLayoutGap { /** * The rows gap between tiles. * Defaults to `16px`. */ rows?: number | string; /** * The columns gap between tiles. * Defaults to `16px`. */ columns?: number | string; } /** * Controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the TileLayout. * For further reference, check [grid-auto-flow CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow) article. * Defaults to `column`. */ export type TileLayoutAutoFlow = 'column' | 'row' | 'column dense' | 'row dense' | 'unset'; /** * The arguments for the `onReposition` TileLayout event. */ export interface TileLayoutRepositionEvent { /** * The new positions of the TileLayout tiles. */ value: Array; /** * The index of the currently moved tile. */ index: number; /** * Returns 0 if the row is not changed, 1 if the item is dragged to the next row * and -1 if the item is drag to the previous row. */ row: number; /** * Returns 0 if the column is not changed, 1 if the item is dragged to the next column * and -1 if the item is drag to the previous column. */ col: number; } /** * The arguments for the `onTileresize` TileLayout event. */ export interface TileLayoutTileResizeEvent { /** * The new resized positions of the TileLayout tiles. */ value: Array; /** * The index of the currently resized tile. */ index: number; /** * Returns 0 if the rowSpan is not changed, 1 if the rowSpan is increased * and -1 if the rowSpan is decreased. */ rowSpan: number; /** * Returns 0 if the columnSpan is not changed, 1 if the columnSpan is increased * and -1 if the columnSpan is decreased. */ colSpan: number; }