igniteui-webcomponents 5.1.2 → 5.3.0-alpha.0

package/components/tile-manager/tile-manager.js

@@ -0,0 +1,188 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var IgcTileManagerComponent_1;
+import { ContextProvider } from '@lit/context';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { themes } from '../../theming/theming-decorator.js';
+import { tileManagerContext } from '../common/context.js';
+import { createMutationController, } from '../common/controllers/mutation-observer.js';
+import { registerComponent } from '../common/definitions/register.js';
+import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
+import { asNumber, findElementFromEventPath, partNameMap, } from '../common/util.js';
+import { createTilesState, isSameTile, swapTiles } from './position.js';
+import { createSerializer } from './serializer.js';
+import { all } from './themes/container.js';
+import { styles as shared } from './themes/shared/tile-manager.common.css.js';
+import { styles } from './themes/tile-manager.base.css.js';
+import IgcTileComponent from './tile.js';
+let IgcTileManagerComponent = IgcTileManagerComponent_1 = class IgcTileManagerComponent extends EventEmitterMixin(LitElement) {
+    static register() {
+        registerComponent(IgcTileManagerComponent_1, IgcTileComponent);
+    }
+    _setManagerContext() {
+        this._context.setValue({
+            instance: this,
+            draggedItem: this._draggedItem,
+            lastSwapTile: this._lastSwapTile,
+        }, true);
+    }
+    _observerCallback({ changes: { added, removed }, }) {
+        const ownAdded = added.filter(({ target }) => target.closest(this.tagName) === this);
+        const ownRemoved = removed.filter(({ target }) => target.closest(this.tagName) === this);
+        for (const remove of ownRemoved) {
+            this._tilesState.remove(remove.node);
+        }
+        for (const added of ownAdded) {
+            this._tilesState.add(added.node);
+        }
+        this._tilesState.assignTiles();
+    }
+    set columnCount(value) {
+        this._columnCount = Math.max(0, asNumber(value));
+        Object.assign(this._internalStyles, {
+            '--ig-column-count': this._columnCount || undefined,
+        });
+    }
+    get columnCount() {
+        return this._columnCount;
+    }
+    set minColumnWidth(value) {
+        this._minColWidth = value ?? undefined;
+        Object.assign(this._internalStyles, {
+            '--ig-min-col-width': this._minColWidth,
+        });
+    }
+    get minColumnWidth() {
+        return this._minColWidth;
+    }
+    set minRowHeight(value) {
+        this._minRowHeight = value ?? undefined;
+        Object.assign(this._internalStyles, {
+            '--ig-min-row-height': this._minRowHeight,
+        });
+    }
+    get minRowHeight() {
+        return this._minRowHeight;
+    }
+    set gap(value) {
+        this._gap = value ?? undefined;
+        Object.assign(this._internalStyles, {
+            '--ig-gap': this._gap,
+        });
+    }
+    get gap() {
+        return this._gap;
+    }
+    get tiles() {
+        return this._tilesState.tiles;
+    }
+    constructor() {
+        super();
+        this._internalStyles = {};
+        this._columnCount = 0;
+        this._draggedItem = null;
+        this._lastSwapTile = null;
+        this._serializer = createSerializer(this);
+        this._tilesState = createTilesState(this);
+        this._context = new ContextProvider(this, {
+            context: tileManagerContext,
+            initialValue: {
+                instance: this,
+                draggedItem: this._draggedItem,
+                lastSwapTile: this._lastSwapTile,
+            },
+        });
+        this.dragMode = 'slide';
+        createMutationController(this, {
+            callback: this._observerCallback,
+            filter: [IgcTileComponent.tagName],
+            config: {
+                childList: true,
+            },
+        });
+    }
+    firstUpdated() {
+        this._tilesState.assignPositions();
+        this._tilesState.assignTiles();
+    }
+    handleTileDragStart({ detail }) {
+        this.emitEvent('igcTileDragStarted', { detail });
+        this._draggedItem = detail;
+        this._setManagerContext();
+    }
+    handleTileDragEnd() {
+        if (this._draggedItem) {
+            this._draggedItem = null;
+            this._setManagerContext();
+        }
+    }
+    handleDragOver(event) {
+        event.preventDefault();
+    }
+    handleDrop(event) {
+        event.preventDefault();
+        const draggedItem = this._draggedItem;
+        const target = findElementFromEventPath(IgcTileComponent.tagName, event);
+        if (!isSameTile(draggedItem, target) &&
+            this.dragMode === 'swap' &&
+            !target?.disableDrag) {
+            swapTiles(draggedItem, target);
+        }
+    }
+    saveLayout() {
+        return this._serializer.saveAsJSON();
+    }
+    loadLayout(data) {
+        this._serializer.loadFromJSON(data);
+    }
+    render() {
+        const parts = partNameMap({
+            base: true,
+            'maximized-tile': this.tiles.some((tile) => tile.maximized),
+        });
+        return html `
+      <div
+        style=${styleMap(this._internalStyles)}
+        part=${parts}
+        @tileDragStart=${this.handleTileDragStart}
+        @tileDragEnd=${this.handleTileDragEnd}
+        @dragover=${this.handleDragOver}
+        @drop=${this.handleDrop}
+      >
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+IgcTileManagerComponent.tagName = 'igc-tile-manager';
+IgcTileManagerComponent.styles = [styles, shared];
+IgcTileManagerComponent.shadowRootOptions = {
+    mode: 'open',
+    slotAssignment: 'manual',
+};
+__decorate([
+    property({ attribute: 'drag-mode' })
+], IgcTileManagerComponent.prototype, "dragMode", void 0);
+__decorate([
+    property({ type: Number, attribute: 'column-count' })
+], IgcTileManagerComponent.prototype, "columnCount", null);
+__decorate([
+    property({ attribute: 'min-column-width' })
+], IgcTileManagerComponent.prototype, "minColumnWidth", null);
+__decorate([
+    property({ attribute: 'min-row-height' })
+], IgcTileManagerComponent.prototype, "minRowHeight", null);
+__decorate([
+    property()
+], IgcTileManagerComponent.prototype, "gap", null);
+IgcTileManagerComponent = IgcTileManagerComponent_1 = __decorate([
+    themes(all)
+], IgcTileManagerComponent);
+export default IgcTileManagerComponent;
+//# sourceMappingURL=tile-manager.js.map

package/components/tile-manager/tile-manager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tile-manager.js","sourceRoot":"","sources":["../../../src/components/tile-manager/tile-manager.ts"],"names":[],"mappings":"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","sourcesContent":["import { ContextProvider } from '@lit/context';\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { type StyleInfo, styleMap } from 'lit/directives/style-map.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { tileManagerContext } from '../common/context.js';\nimport {\n  type MutationControllerParams,\n  createMutationController,\n} from '../common/controllers/mutation-observer.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport {\n  asNumber,\n  findElementFromEventPath,\n  partNameMap,\n} from '../common/util.js';\nimport { createTilesState, isSameTile, swapTiles } from './position.js';\nimport { createSerializer } from './serializer.js';\nimport { all } from './themes/container.js';\nimport { styles as shared } from './themes/shared/tile-manager.common.css.js';\nimport { styles } from './themes/tile-manager.base.css.js';\nimport IgcTileComponent from './tile.js';\n\n// REVIEW: WIP\nexport interface IgcTileManagerComponentEventMap {\n  igcTileDragStarted: CustomEvent<IgcTileComponent>;\n}\n\n/**\n * The tile manager component enables the dynamic arrangement, resizing, and interaction of tiles.\n *\n * @element igc-tile-manager\n *\n * @fires igcTileDragStarted - Fired when an owning tile begins a drag operation.\n */\n@themes(all)\nexport default class IgcTileManagerComponent extends EventEmitterMixin<\n  IgcTileManagerComponentEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-tile-manager';\n  public static styles = [styles, shared];\n\n  protected static shadowRootOptions: ShadowRootInit = {\n    mode: 'open',\n    slotAssignment: 'manual',\n  };\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcTileManagerComponent, IgcTileComponent);\n  }\n\n  private _internalStyles: StyleInfo = {};\n\n  private _columnCount = 0;\n  private _gap?: string;\n  private _minColWidth?: string;\n  private _minRowHeight?: string;\n  private _draggedItem: IgcTileComponent | null = null;\n  private _lastSwapTile: IgcTileComponent | null = null;\n\n  private _serializer = createSerializer(this);\n  private _tilesState = createTilesState(this);\n\n  private _context = new ContextProvider(this, {\n    context: tileManagerContext,\n    initialValue: {\n      instance: this,\n      draggedItem: this._draggedItem,\n      lastSwapTile: this._lastSwapTile,\n    },\n  });\n\n  private _setManagerContext() {\n    this._context.setValue(\n      {\n        instance: this,\n        draggedItem: this._draggedItem,\n        lastSwapTile: this._lastSwapTile,\n      },\n      true\n    );\n  }\n\n  private _observerCallback({\n    changes: { added, removed },\n  }: MutationControllerParams<IgcTileComponent>) {\n    const ownAdded = added.filter(\n      ({ target }) => target.closest(this.tagName) === this\n    );\n    const ownRemoved = removed.filter(\n      ({ target }) => target.closest(this.tagName) === this\n    );\n\n    for (const remove of ownRemoved) {\n      this._tilesState.remove(remove.node);\n    }\n\n    for (const added of ownAdded) {\n      this._tilesState.add(added.node);\n    }\n\n    this._tilesState.assignTiles();\n  }\n\n  /**\n   * Determines whether the tiles slide or swap on drop.\n   * @attr drag-mode\n   */\n  @property({ attribute: 'drag-mode' })\n  public dragMode: 'slide' | 'swap' = 'slide';\n\n  /**\n   * Sets the number of columns for the tile manager.\n   * Setting value <= than zero will trigger a responsive layout.\n   *\n   * @attr column-count\n   * @default 0\n   */\n  @property({ type: Number, attribute: 'column-count' })\n  public set columnCount(value: number) {\n    this._columnCount = Math.max(0, asNumber(value));\n    Object.assign(this._internalStyles, {\n      '--ig-column-count': this._columnCount || undefined,\n    });\n  }\n\n  public get columnCount(): number {\n    return this._columnCount;\n  }\n\n  /**\n   * Sets the minimum width for a column unit in the tile manager.\n   * @attr min-column-width\n   */\n  @property({ attribute: 'min-column-width' })\n  public set minColumnWidth(value: string | undefined) {\n    this._minColWidth = value ?? undefined;\n    Object.assign(this._internalStyles, {\n      '--ig-min-col-width': this._minColWidth,\n    });\n  }\n\n  public get minColumnWidth(): string | undefined {\n    return this._minColWidth;\n  }\n\n  /**\n   * Sets the minimum height for a row unit in the tile manager.\n   * @attr min-row-height\n   */\n  @property({ attribute: 'min-row-height' })\n  public set minRowHeight(value: string | undefined) {\n    this._minRowHeight = value ?? undefined;\n    Object.assign(this._internalStyles, {\n      '--ig-min-row-height': this._minRowHeight,\n    });\n  }\n\n  public get minRowHeight(): string | undefined {\n    return this._minRowHeight;\n  }\n\n  /**\n   * Sets the gap size of the the tile manager.\n   */\n  @property()\n  public set gap(value: string | undefined) {\n    this._gap = value ?? undefined;\n    Object.assign(this._internalStyles, {\n      '--ig-gap': this._gap,\n    });\n  }\n\n  public get gap(): string | undefined {\n    return this._gap;\n  }\n\n  /**\n   * Gets the tiles sorted by their position in the layout.\n   * @attr\n   */\n  public get tiles() {\n    return this._tilesState.tiles;\n  }\n\n  constructor() {\n    super();\n\n    createMutationController(this, {\n      callback: this._observerCallback,\n      filter: [IgcTileComponent.tagName],\n      config: {\n        childList: true,\n      },\n    });\n  }\n\n  protected override firstUpdated() {\n    this._tilesState.assignPositions();\n    this._tilesState.assignTiles();\n  }\n\n  private handleTileDragStart({ detail }: CustomEvent<IgcTileComponent>) {\n    this.emitEvent('igcTileDragStarted', { detail });\n    this._draggedItem = detail;\n    this._setManagerContext();\n  }\n\n  private handleTileDragEnd() {\n    if (this._draggedItem) {\n      this._draggedItem = null;\n      this._setManagerContext();\n    }\n  }\n\n  private handleDragOver(event: DragEvent) {\n    event.preventDefault(); // Allow dropping\n  }\n\n  private handleDrop(event: DragEvent) {\n    event.preventDefault();\n\n    const draggedItem = this._draggedItem;\n    const target = findElementFromEventPath<IgcTileComponent>(\n      IgcTileComponent.tagName,\n      event\n    );\n\n    if (\n      !isSameTile(draggedItem, target) &&\n      this.dragMode === 'swap' &&\n      !target?.disableDrag\n    ) {\n      swapTiles(draggedItem!, target!);\n    }\n  }\n\n  public saveLayout(): string {\n    return this._serializer.saveAsJSON();\n  }\n\n  public loadLayout(data: string): void {\n    this._serializer.loadFromJSON(data);\n  }\n\n  protected override render() {\n    const parts = partNameMap({\n      base: true,\n      'maximized-tile': this.tiles.some((tile) => tile.maximized),\n    });\n\n    return html`\n      <div\n        style=${styleMap(this._internalStyles)}\n        part=${parts}\n        @tileDragStart=${this.handleTileDragStart}\n        @tileDragEnd=${this.handleTileDragEnd}\n        @dragover=${this.handleDragOver}\n        @drop=${this.handleDrop}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-tile-manager': IgcTileManagerComponent;\n  }\n}\n"]}

package/components/tile-manager/tile-util.d.ts

@@ -0,0 +1,6 @@
+export declare class ResizeUtil {
+    static calculateSnappedHeight(deltaY: number, startingY: number, rowHeights: number[], rowGap: number, initialTop: number, initialHeight: number): number;
+    static calculateSnappedWidth(deltaX: number, initialWidth: number, gap: number, gridColumnWidth: number): number;
+    static calculate(initialTop: number, rowHeights: number[], rowGap: number): any;
+    private static accumulateHeight;
+}

package/components/tile-manager/tile-util.js

@@ -0,0 +1,70 @@
+export class ResizeUtil {
+    static calculateSnappedHeight(deltaY, startingY, rowHeights, rowGap, initialTop, initialHeight) {
+        const snappedHeight = startingY + deltaY;
+        const rowsAbove = ResizeUtil.calculate(initialTop, rowHeights, rowGap).targetIndex || 0;
+        const res = ResizeUtil.calculate(snappedHeight, rowHeights, rowGap);
+        const accumulatedHeight = res.accumulatedHeight;
+        const startRowIndex = res.targetIndex;
+        const aboveRowsHeight = ResizeUtil.accumulateHeight(rowsAbove, rowHeights, rowGap);
+        let result = initialHeight;
+        let previousRowsHeight = ResizeUtil.accumulateHeight(startRowIndex, rowHeights, rowGap);
+        if (deltaY > 0) {
+            const rowHeight = rowHeights[startRowIndex];
+            const halfwayThreshold = previousRowsHeight + rowGap + rowHeight / 2;
+            if (snappedHeight >= halfwayThreshold) {
+                result = accumulatedHeight - aboveRowsHeight;
+            }
+            else {
+                result = initialHeight + deltaY;
+            }
+            result = result <= 0 ? rowHeights[startRowIndex - 1] : result;
+        }
+        else if (deltaY < 0) {
+            previousRowsHeight =
+                previousRowsHeight === 0 ? rowHeights[0] : previousRowsHeight;
+            const currentRowHeight = rowHeights[startRowIndex];
+            const halfwayThreshold = accumulatedHeight - currentRowHeight / 2 - rowGap;
+            if (startRowIndex !== 0 && startRowIndex >= startRowIndex - 1) {
+                if (snappedHeight <= halfwayThreshold) {
+                    result =
+                        accumulatedHeight - currentRowHeight - rowGap - aboveRowsHeight;
+                }
+                else {
+                    result = rowHeights
+                        .slice(rowsAbove, startRowIndex)
+                        .reduce((sum, height) => sum + height, 0);
+                }
+            }
+            else {
+                result = snappedHeight - aboveRowsHeight;
+            }
+        }
+        return result;
+    }
+    static calculateSnappedWidth(deltaX, initialWidth, gap, gridColumnWidth) {
+        const newSize = initialWidth + deltaX;
+        const totalSpan = Math.round(newSize / (gridColumnWidth + gap));
+        const snappedWidth = totalSpan * gridColumnWidth + (totalSpan - 1) * gap;
+        return snappedWidth < gridColumnWidth ? gridColumnWidth : snappedWidth;
+    }
+    static calculate(initialTop, rowHeights, rowGap) {
+        let targetIndex = 0;
+        let accumulatedHeight = 0;
+        for (let i = 0; i < rowHeights.length; i++) {
+            accumulatedHeight += rowHeights[i] + (i > 0 ? rowGap : 0);
+            if (initialTop <= accumulatedHeight) {
+                targetIndex = i;
+                break;
+            }
+        }
+        return { targetIndex, accumulatedHeight };
+    }
+    static accumulateHeight(rowIndex, rowHeights, rowGap) {
+        let accumulatedHeight = 0;
+        for (let i = 0; i < rowIndex; i++) {
+            accumulatedHeight += rowHeights[i] + rowGap;
+        }
+        return accumulatedHeight;
+    }
+}
+//# sourceMappingURL=tile-util.js.map

package/components/tile-manager/tile-util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tile-util.js","sourceRoot":"","sources":["../../../src/components/tile-manager/tile-util.ts"],"names":[],"mappings":"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","sourcesContent":["export class ResizeUtil {\n  public static calculateSnappedHeight(\n    deltaY: number,\n    startingY: number,\n    rowHeights: number[],\n    rowGap: number,\n    initialTop: number,\n    initialHeight: number\n  ): number {\n    const snappedHeight = startingY + deltaY;\n    const rowsAbove =\n      ResizeUtil.calculate(initialTop, rowHeights, rowGap).targetIndex || 0;\n    const res = ResizeUtil.calculate(snappedHeight, rowHeights, rowGap)!;\n    const accumulatedHeight = res.accumulatedHeight;\n    const startRowIndex = res.targetIndex;\n    const aboveRowsHeight = ResizeUtil.accumulateHeight(\n      rowsAbove,\n      rowHeights,\n      rowGap\n    );\n\n    let result = initialHeight;\n    let previousRowsHeight = ResizeUtil.accumulateHeight(\n      startRowIndex,\n      rowHeights,\n      rowGap\n    );\n\n    if (deltaY > 0) {\n      const rowHeight = rowHeights[startRowIndex];\n      const halfwayThreshold = previousRowsHeight + rowGap + rowHeight / 2;\n\n      if (snappedHeight >= halfwayThreshold) {\n        result = accumulatedHeight - aboveRowsHeight;\n      } else {\n        result = initialHeight + deltaY;\n      }\n\n      result = result <= 0 ? rowHeights[startRowIndex - 1] : result;\n    } else if (deltaY < 0) {\n      previousRowsHeight =\n        previousRowsHeight === 0 ? rowHeights[0] : previousRowsHeight;\n      const currentRowHeight = rowHeights[startRowIndex];\n      const halfwayThreshold =\n        accumulatedHeight - currentRowHeight / 2 - rowGap;\n\n      if (startRowIndex !== 0 && startRowIndex >= startRowIndex - 1) {\n        if (snappedHeight <= halfwayThreshold) {\n          result =\n            accumulatedHeight - currentRowHeight - rowGap - aboveRowsHeight;\n        } else {\n          result = rowHeights\n            .slice(rowsAbove, startRowIndex)\n            .reduce((sum, height) => sum + height, 0);\n        }\n      } else {\n        result = snappedHeight - aboveRowsHeight;\n      }\n    }\n\n    return result;\n  }\n\n  public static calculateSnappedWidth(\n    deltaX: number,\n    initialWidth: number,\n    gap: number,\n    gridColumnWidth: number\n  ): number {\n    const newSize = initialWidth + deltaX;\n    const totalSpan = Math.round(newSize / (gridColumnWidth + gap));\n    const snappedWidth = totalSpan * gridColumnWidth + (totalSpan - 1) * gap;\n\n    return snappedWidth < gridColumnWidth ? gridColumnWidth : snappedWidth;\n  }\n\n  public static calculate(\n    initialTop: number,\n    rowHeights: number[],\n    rowGap: number\n  ): any {\n    let targetIndex = 0;\n    let accumulatedHeight = 0;\n\n    for (let i = 0; i < rowHeights.length; i++) {\n      accumulatedHeight += rowHeights[i] + (i > 0 ? rowGap : 0);\n      if (initialTop <= accumulatedHeight) {\n        targetIndex = i;\n        break;\n      }\n    }\n\n    return { targetIndex, accumulatedHeight };\n  }\n\n  private static accumulateHeight(\n    rowIndex: number,\n    rowHeights: number[],\n    rowGap: number\n  ): number {\n    let accumulatedHeight = 0;\n    for (let i = 0; i < rowIndex; i++) {\n      accumulatedHeight += rowHeights[i] + rowGap;\n    }\n\n    return accumulatedHeight;\n  }\n}\n"]}

package/components/tile-manager/tile.d.ts

@@ -0,0 +1,128 @@
+import { LitElement, type PropertyValues } from 'lit';
+import type { Constructor } from '../common/mixins/constructor.js';
+type IgcTileChangeState = {
+    tile: IgcTileComponent;
+    state: boolean;
+};
+export interface IgcTileComponentEventMap {
+    igcTileFullscreen: CustomEvent<IgcTileChangeState>;
+    igcTileMaximize: CustomEvent<IgcTileChangeState>;
+    tileDragStart: CustomEvent<IgcTileComponent>;
+    tileDragEnd: CustomEvent<IgcTileComponent>;
+    igcResizeStart: CustomEvent<IgcTileComponent>;
+    igcResizeMove: CustomEvent<IgcTileComponent>;
+    igcResizeEnd: 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 fullscreen state changes.
+ * @fires igcTileMaximize - Fired when tile maximize state changes.
+ * @fires igcResizeStart - Fired when tile begins resizing.
+ * @fires igcResizeMove - Fired when tile is being resized.
+ * @fires igcResizeEnd - Fired when tile finishes resizing.
+ */
+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 _disableDrag;
+    private _maximized;
+    private _initialPointerX;
+    private _initialPointerY;
+    private _dragCounter;
+    private _dragGhost;
+    private _dragImage;
+    private _cachedStyles;
+    private _managerContext?;
+    private _context;
+    private _setTileContext;
+    private get _draggedItem();
+    private get _isSlideMode();
+    _ghost: HTMLElement;
+    _tileContent: HTMLElement;
+    private _isDragging;
+    private _hasDragOver;
+    private _isResizing;
+    /**
+     * The unique identifier of the tile.
+     * @attr
+     */
+    tileId: string | null;
+    set colSpan(value: number);
+    get colSpan(): number;
+    set rowSpan(value: number);
+    get rowSpan(): number;
+    set colStart(value: number);
+    get colStart(): number | null;
+    set rowStart(value: number);
+    get rowStart(): number | null;
+    /**
+     * Indicates whether the tile occupies the whole screen.
+     * @attr fullscreen
+     */
+    set fullscreen(value: boolean);
+    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 the tile can be dragged.
+     * @attr disable-drag
+     */
+    set disableDrag(value: boolean);
+    get disableDrag(): boolean;
+    /**
+     * Indicates whether the tile can be resized.
+     * @attr disable-resize
+     */
+    disableResize: boolean;
+    /**
+     * Gets/sets the tile's visual position in the layout.
+     * Corresponds to the CSS order property.
+     * @attr
+     */
+    set position(value: number);
+    get position(): number;
+    protected get gridColumnWidth(): number;
+    constructor();
+    connectedCallback(): void;
+    protected updated(changedProperties: PropertyValues): void;
+    private emitFullScreenEvent;
+    private assignDragImage;
+    private handleDragStart;
+    private handleDragEnter;
+    private handleDragOver;
+    private handleDragLeave;
+    private handleDragEnd;
+    private hasPointerLeftLastSwapTile;
+    private cacheStyles;
+    private _handleResizeStart;
+    private _handleResize;
+    private _handleResizeEnd;
+    private _calculateRowSpan;
+    protected ghostFactory: () => HTMLDivElement;
+    protected renderContent(): import("lit-html").TemplateResult<1>;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-tile': IgcTileComponent;
+    }
+}
+export {};