import { type IEventEmitter } from '@breadstone/mosaik-elements'; import { type Ref } from 'lit/directives/ref.js'; import type { ITileDragCancelEventDetail, ITileDragEndEventDetail, ITileDragStartEventDetail, ITileFullscreenEventDetail, ITileMaximizeEventDetail, ITileResizeCancelEventDetail, ITileResizeEndEventDetail, ITileResizeStartEventDetail } from '../../../events'; import type { TileManagerResizeMode } from '../../../Types/TileManagerResizeMode'; import { CustomElement } from '../../Abstracts/CustomElement'; import type { ITileManagerTileElementProps } from './ITileManagerTileElementProps'; import type { TileManagerElement } from './TileManagerElement'; declare const TileManagerTileElement_base: (abstract new (...args: Array) => import("../../../Behaviors/Themeable").IThemeableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor; /** * The tile component is used within the `mosaik-tile-manager` as a container * for displaying various types of information. * * @element mosaik-tile-manager-tile * @category Layout * * @fires tileFullscreen {TileFullscreenEvent} - Fired when tile the fullscreen state changes. * @fires tileMaximize {TileMaximizeEvent} - Fired when tile the maximize state changes. * @fires tileDragStart {TileDragStartEvent} - Fired when a drag operation on a tile is about to begin. * @fires tileDragEnd {TileDragEndEvent} - Fired when a drag operation with a tile is successfully completed. * @fires tileDragCancel {TileDragCancelEvent} - Fired when a tile drag operation is canceled by the user. * @fires tileResizeStart {TileResizeStartEvent} - Fired when a resize operation on a tile is about to begin. * @fires tileResizeEnd {TileResizeEndEvent} - Fired when a resize operation on a tile is successfully completed. * @fires tileResizeCancel {TileResizeCancelEvent} - Fired when a resize operation on a tile is canceled by the user. * * @slot - Default slot for the tile's content. * @slot title - Renders the title of the tile header. * @slot maximize-action - Renders the maximize action element of the tile header. * @slot fullscreen-action - Renders the fullscreen action element of the tile header. * @slot actions - Renders items after the default actions in the tile header. * @slot side-adorner - Renders the side resize handle of the tile. * @slot corner-adorner - Renders the corner resize handle of the tile. * @slot bottom-adorner - Renders the bottom resize handle of the tile. * * @csspart base - The wrapper for the entire tile content, header and content. * @csspart header - The container for the tile header, including title and actions. * @csspart title - The title container of the tile. * @csspart actions - The actions container of the tile header. * @csspart content-container - The container wrapping the tile's main content. * @csspart trigger-side - The side resize handle. * @csspart trigger - The corner resize handle. * @csspart trigger-bottom - The bottom resize handle. * * @example * Basic tile spanning two columns: * ```html * *

Tile content goes here

*
* ``` * * @example * Maximized tile with resize and fullscreen disabled: * ```html * *

Full-width content

*
* ``` * * @public */ export declare class TileManagerTileElement extends TileManagerTileElement_base implements ITileManagerTileElementProps { private _colSpan; private _rowSpan; private _colStart; private _rowStart; private _position; private _maximized; private _fullscreen; private _disableResize; private _disableFullscreen; private _disableMaximize; private _isDragging; private _resizeStartRect; private readonly _headerRef; private readonly _tileContentRef; private readonly _resizeState; private readonly _dragStack; private readonly _dragController; private readonly _resizeController; private readonly _inlineStyleController; private readonly _tileFullscreen; private readonly _tileMaximize; private readonly _tileDragStart; private readonly _tileDragEnd; private readonly _tileDragCancel; private readonly _tileResizeStart; private readonly _tileResizeEnd; private readonly _tileResizeCancel; /** * Constructs a new instance of the `TileManagerTileElement` class. * * @public */ constructor(); /** * Returns the `is` property. * * @public * @static * @readonly */ static get is(): string; /** * Gets or sets the `colSpan` property. * * @public * @attr */ get colSpan(): number; set colSpan(value: number); /** * Gets or sets the `rowSpan` property. * * @public * @attr */ get rowSpan(): number; set rowSpan(value: number); /** * Gets or sets the `colStart` property. * * @public * @attr */ get colStart(): number | null; set colStart(value: number | null); /** * Gets or sets the `rowStart` property. * * @public * @attr */ get rowStart(): number | null; set rowStart(value: number | null); /** * Gets or sets the `position` property. * * @public * @attr */ get position(): number; set position(value: number); /** * Gets or sets the `maximized` property. * * @public * @attr */ get maximized(): boolean; set maximized(value: boolean); /** * Indicates whether the tile occupies the whole screen. * * @public * @readonly */ get fullscreen(): boolean; /** * Gets or sets the `disableResize` property. * * @public * @attr */ get disableResize(): boolean; set disableResize(value: boolean); /** * Gets or sets the `disableFullscreen` property. * * @public * @attr */ get disableFullscreen(): boolean; set disableFullscreen(value: boolean); /** * Gets or sets the `disableMaximize` property. * * @public * @attr */ get disableMaximize(): boolean; set disableMaximize(value: boolean); /** * Gets the parent tile manager element. * * @public * @readonly */ get tileManager(): TileManagerElement | null; /** * Gets the current resize mode from the parent tile manager. * * @public * @readonly */ get resizeMode(): TileManagerResizeMode; /** * Gets whether resize is disabled for this tile. * * @public * @readonly */ get resizeDisabled(): boolean; /** * Gets whether the tile is currently resizing. * * @public * @readonly */ get isResizing(): boolean; /** * Gets whether the tile is currently being dragged. * * @public * @readonly */ get isDragging(): boolean; /** * Gets whether the tile is draggable. * * @public * @readonly */ get isDraggable(): boolean; /** * Gets the header reference for tile-header drag mode. * * @public * @readonly */ get headerRef(): Ref; /** * Gets the tile content reference. * * @public * @readonly */ get tileContentRef(): Ref; /** * Gets whether the tile is resizable. * * @public * @readonly */ get isResizable(): boolean; /** * Gets the CSS grid container from the tile manager. * * @public * @readonly */ get cssContainer(): HTMLElement | null; /** * Gets the tileFullscreen event emitter. * * @public * @readonly */ get tileFullscreen(): IEventEmitter; /** * Gets the tileMaximize event emitter. * * @public * @readonly */ get tileMaximize(): IEventEmitter; /** * Gets the tileDragStart event emitter. * * @public * @readonly */ get tileDragStart(): IEventEmitter; /** * Gets the tileDragEnd event emitter. * * @public * @readonly */ get tileDragEnd(): IEventEmitter; /** * Gets the tileDragCancel event emitter. * * @public * @readonly */ get tileDragCancel(): IEventEmitter; /** * Gets the tileResizeStart event emitter. * * @public * @readonly */ get tileResizeStart(): IEventEmitter; /** * Gets the tileResizeEnd event emitter. * * @public * @readonly */ get tileResizeEnd(): IEventEmitter; /** * Gets the tileResizeCancel event emitter. * * @public * @readonly */ get tileResizeCancel(): IEventEmitter; /** * @public * @override */ connectedCallback(): void; /** * @public * @override */ disconnectedCallback(): void; /** * Sets the drag state (visual appearance while dragging). * * @param state - Whether dragging is active. * * @public */ setDragState(state?: boolean): void; /** * Handles the maximize button click. * When maximized, toggles to restored state and vice versa. * * @public */ handleMaximize(): Promise; /** * Handles the fullscreen button click. * * @public */ handleFullscreen(): void; /** * Handles resize pointer down - delegates to DragResizeController. * This method is called from the template's pointer event handlers. * * @param _event - The pointer event (handled by controller). * * @public */ handleResizePointerDown(_event: PointerEvent): void; /** * Handles resize pointer move - delegates to DragResizeController. * * @param _event - The pointer event (handled by controller). * * @public */ handleResizePointerMove(_event: PointerEvent): void; /** * Handles resize pointer up - delegates to DragResizeController. * * @public */ handleResizePointerUp(): void; /** * Handles resize cancel (e.g., Escape key). * This can be called externally to cancel an in-progress resize. * * @public */ handleResizeCancel(): void; /** * Called after the component's first update cycle has completed. * At this point the template has rendered and refs are available. * * @protected * @override */ protected firstUpdated(): void; /** * @protected * @override */ protected updated(_changedProperties: Map): void; /** * Configures the drag controller based on the current drag mode. * * @private */ private _setDragConfiguration; /** * Configures the resize controller based on the current resize mode. * * @private */ private _setResizeConfiguration; /** * Handles the fullscreenchange event to sync internal state. * * @private */ private readonly _handleFullscreenChange; /** * Determines whether a drag operation should be skipped. * * @param event - The pointer event. * @returns True if the drag should be skipped. * * @private */ private _skipDrag; /** * Determines if an element is a valid drop target. * * @param element - The element to check. * @returns True if the element is a valid drop target. * * @private */ private _matchDragTarget; /** * Creates a drag ghost element. * * @returns The ghost element. * * @private */ private _createDragGhost; /** * Handles drag start. * * @param _params - The drag callback parameters. * @returns False to cancel the drag, otherwise undefined/true. * * @private */ private _handleDragStart; /** * Handles dragging over a potential drop target. * * @param params - The drag callback parameters. * * @private */ private _handleDragOver; /** * Determines whether tiles should be swapped based on pointer position and direction. * * @param event - The pointer event. * @param direction - The drag direction. * @param match - The matched tile. * @returns True if tiles should be swapped. * * @private */ private _shouldSwap; /** * Performs the swap animation with the matched tile. * * @param match - The tile to swap with. * * @private */ private _performSwap; /** * Handles drag end. * * @param _params - The drag callback parameters. * * @private */ private _handleDragEnd; /** * Handles drag cancel. * * @private */ private _handleDragCancel; /** * Determines the resize handle type from the target element. * * @param target - The target element. * @returns The resize handle type. * * @private */ private _determineResizeHandle; /** * Matches the resize handle from an element. * Used by DragResizeController. * * @param element - The element to check. * @returns The resize handle type or null. * * @private */ private _matchResizeHandle; /** * Creates a resize ghost element for the deferred resize mode. * Used by DragResizeController. * * @returns The ghost element. * * @private */ private _createResizeGhost; /** * Calculates snapped dimensions during resize operations. * Uses the TileManagerResizeState for grid-aware snapping. * * @param dimensions - The current dimensions. * @param delta - The delta from start position. * @param handle - The resize handle being used. * @returns The snapped dimensions. * * @private */ private _calculateSnappedDimensions; /** * Handles resize start from the DragResizeController. * * @param params - The resize callback parameters. * @returns False to cancel the resize, otherwise undefined. * * @private */ private handleResizeStart; /** * Handles resize movement from the DragResizeController. * * @param _params - The resize callback parameters. * * @private */ private handleResize; /** * Handles resize end from the DragResizeController. * * @param params - The resize callback parameters. * * @private */ private handleResizeEnd; /** * Handles resize cancel from the DragResizeController. * * @param _state - The resize state at cancel. * * @private */ private handleResizeCancelled; /** * Updates ARIA attributes based on current state. * * @private */ private updateAriaAttributes; /** * Handles keyboard events for accessibility. * * @param event - The keyboard event. * * @private */ private readonly handleKeyDown; /** * Handles arrow key navigation between tiles. * * @param event - The keyboard event. * * @private */ private handleArrowKeyNavigation; /** * Focuses a tile by its position index. * * @param position - The position index of the tile to focus. * * @private */ private focusTile; } /** * @public */ export declare namespace TileManagerTileElement { type Props = ITileManagerTileElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-tile-manager-tile': TileManagerTileElement; } } export {}; //# sourceMappingURL=TileManagerTileElement.d.ts.map