igniteui-webcomponents
Version:
Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.
208 lines (207 loc) • 7.77 kB
TypeScript
import { LitElement } from 'lit';
import type { Constructor } from '../common/mixins/constructor.js';
import IgcResizeContainerComponent from '../resize-container/resize-container.js';
export type IgcTileChangeStateEventArgs = {
tile: IgcTileComponent;
state: boolean;
};
export interface IgcTileComponentEventMap {
igcTileFullscreen: CustomEvent<IgcTileChangeStateEventArgs>;
igcTileMaximize: CustomEvent<IgcTileChangeStateEventArgs>;
igcTileDragStart: CustomEvent<IgcTileComponent>;
igcTileDragEnd: CustomEvent<IgcTileComponent>;
igcTileDragCancel: CustomEvent<IgcTileComponent>;
igcTileResizeStart: CustomEvent<IgcTileComponent>;
igcTileResizeEnd: CustomEvent<IgcTileComponent>;
igcTileResizeCancel: CustomEvent<IgcTileComponent>;
}
declare const IgcTileComponent_base: Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcTileComponentEventMap>> & Constructor<LitElement>;
/**
* The tile component is used within the `igc-tile-manager` as a container
* for displaying various types of information.
*
* @element igc-tile
*
* @fires igcTileFullscreen - Fired when tile the fullscreen state changes.
* @fires igcTileMaximize - Fired when tile the maximize state changes.
* @fires igcTileDragStart - Fired when a drag operation on a tile is about to begin. Cancelable.
* @fires igcTileDragEnd - Fired when a drag operation with a tile is successfully completed.
* @fires igcTileDragCancel - Fired when a tile drag operation is canceled by the user.
* @fires igcTileResizeStart - Fired when a resize operation on a tile is about to begin. Cancelable.
* @fires igcTileResizeEnd - Fired when a resize operation on a tile is successfully completed.
* @fires igcTileResizeCancel - 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 part for the side adorner of the encapsulated resize element in the tile.
* @csspart trigger - The part for the corner adorner of the encapsulated resize element in the tile.
* @csspart trigger-bottom - The part for the bottom adorner of the encapsulated resize element in the tile.
*/
export default class IgcTileComponent extends IgcTileComponent_base {
static readonly tagName = "igc-tile";
static styles: import("lit").CSSResult[];
static register(): void;
private static readonly increment;
private _dragController;
private _fullscreenController;
private _colSpan;
private _rowSpan;
private _colStart;
private _rowStart;
private _position;
private _resizeState;
private _dragStack;
private _customAdorners;
/**
* Context consumer callback that sets the updated configuration of the internal drag controller
* based on the passed tile manager properties.
*/
private _setDragConfiguration;
private _context;
/** Returns the parent tile manager context. */
private get _tileManagerCtx();
private get _tileManager();
/** Returns the tile manager internal CSS grid container. */
private get _cssContainer();
/** Returns the tile manager current resize mode. */
private get _resizeMode();
protected _headerRef: import("lit-html/directives/ref.js").Ref<HTMLElement>;
private _titleElements;
private _actionsElements;
protected _resizeContainer?: IgcResizeContainerComponent;
_tileContent: HTMLElement;
private _maximized;
private _isDragging;
private _isResizing;
/** Whether to render the resize container based on tile and tile manager configuration. */
private get _resizeDisabled();
/**
* The number of columns the tile will span.
*
* @remarks
* When setting a value that is less than 1, it will be
* coerced to 1.
*
* @attr col-span
* @default 1
*/
set colSpan(value: number);
get colSpan(): number;
/**
* The number of rows the tile will span.
*
* @remarks
* When setting a value that is less than 1, it will be
* coerced to 1.
*
* @attr row-span
* @default 1
*/
set rowSpan(value: number);
get rowSpan(): number;
/**
* The starting column for the tile.
*
* @attr col-start
*/
set colStart(value: number | null);
get colStart(): number | null;
/**
* The starting row for the tile.
*
* @attr row-start
*/
set rowStart(value: number | null);
get rowStart(): number | null;
/**
* Indicates whether the tile occupies the whole screen.
*
* @property
*/
get fullscreen(): boolean;
/**
* Indicates whether the tile occupies all available space within the layout.
*
* @attr maximized
*/
set maximized(value: boolean);
get maximized(): boolean;
/**
* Indicates whether to disable tile resize behavior regardless
* ot its tile manager parent settings.
*
* @attr disable-resize
* @default false
*/
disableResize: boolean;
/**
* Whether to disable the rendering of the tile `fullscreen-action` slot and its
* default fullscreen action button.
*
* @attr disable-fullscreen
* @default false
*/
disableFullscreen: boolean;
/**
* Whether to disable the rendering of the tile `maximize-action` slot and its
* default maximize action button.
*
* @attr disable-maximize
* @default false
*/
disableMaximize: boolean;
/**
* Gets/sets the tile's visual position in the layout.
* Corresponds to the CSS `order` property.
*
* @attr position
*/
set position(value: number);
get position(): number;
/** @internal */
connectedCallback(): void;
protected createRenderRoot(): HTMLElement | DocumentFragment;
private _setDragState;
private _handleDragStart;
private _handleDragOver;
private _handleDragCancel;
private _handleDragEnd;
private _skipDrag;
private _match;
private _createDragGhost;
private _createResizeGhost;
private _setResizeState;
private _handleResizeStart;
private _handleResize;
private _handleResizeEnd;
private _handleResizeCancel;
private _handleFullscreen;
private _handleMaximize;
private _emitFullScreenEvent;
private _emitMaximizedEvent;
private _emitTileDragStart;
private _emitTileResizeStart;
protected _renderDefaultAction(type: 'maximize' | 'fullscreen'): import("lit-html").TemplateResult<1>;
protected _renderHeader(): import("lit-html").TemplateResult<1>;
protected _renderContent(): import("lit-html").TemplateResult<1>;
private _renderAdornerSlot;
protected render(): import("lit-html").TemplateResult<1>;
}
declare global {
interface HTMLElementTagNameMap {
'igc-tile': IgcTileComponent;
}
}
export {};