igniteui-webcomponents 5.2.0 → 5.3.0-alpha.0

package/components/tile-manager/tile.js

@@ -0,0 +1,467 @@
+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 IgcTileComponent_1;
+import { ContextProvider, consume } from '@lit/context';
+import { LitElement, html } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { themes } from '../../theming/theming-decorator.js';
+import { tileContext, tileManagerContext, } from '../common/context.js';
+import { registerComponent } from '../common/definitions/register.js';
+import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
+import { asNumber, createCounter, partNameMap } from '../common/util.js';
+import { addFullscreenController } from './controllers/fullscreen.js';
+import { addTileDragAndDrop } from './controllers/tile-dnd.js';
+import { isSameTile, swapTiles } from './position.js';
+import IgcResizeComponent from './resize-element.js';
+import { styles as shared } from './themes/shared/tile/tile.common.css.js';
+import { styles } from './themes/tile.base.css.js';
+import { all } from './themes/tile.js';
+import IgcTileHeaderComponent from './tile-header.js';
+import { ResizeUtil } from './tile-util.js';
+let IgcTileComponent = IgcTileComponent_1 = class IgcTileComponent extends EventEmitterMixin(LitElement) {
+    static register() {
+        registerComponent(IgcTileComponent_1, IgcTileHeaderComponent, IgcResizeComponent);
+    }
+    _setTileContext() {
+        this._context.setValue({
+            instance: this,
+            setFullscreenState: (fullscreen, isUserTriggered) => this._fullscreenController.setState(fullscreen, isUserTriggered),
+        }, true);
+    }
+    get _draggedItem() {
+        return this._managerContext?.draggedItem ?? null;
+    }
+    get _isSlideMode() {
+        return this._managerContext
+            ? this._managerContext.instance.dragMode === 'slide'
+            : true;
+    }
+    set colSpan(value) {
+        this._colSpan = Math.max(1, asNumber(value));
+        this.style.setProperty('--ig-col-span', this._colSpan.toString());
+    }
+    get colSpan() {
+        return this._colSpan;
+    }
+    set rowSpan(value) {
+        this._rowSpan = Math.max(1, asNumber(value));
+        this.style.setProperty('--ig-row-span', this._rowSpan.toString());
+    }
+    get rowSpan() {
+        return this._rowSpan;
+    }
+    set colStart(value) {
+        this._colStart = Math.max(0, asNumber(value)) || null;
+        this.style.setProperty('--ig-col-start', this._colStart ? this._colStart.toString() : null);
+    }
+    get colStart() {
+        return this._colStart;
+    }
+    set rowStart(value) {
+        this._rowStart = Math.max(0, asNumber(value)) || null;
+        this.style.setProperty('--ig-row-start', this._rowStart ? this._rowStart.toString() : null);
+    }
+    get rowStart() {
+        return this._rowStart;
+    }
+    set fullscreen(value) {
+        this._fullscreenController.setState(value);
+    }
+    get fullscreen() {
+        return this._fullscreenController.fullscreen;
+    }
+    set maximized(value) {
+        this._maximized = value;
+        this._setTileContext();
+        if (this._managerContext) {
+            this._managerContext.instance.requestUpdate();
+        }
+    }
+    get maximized() {
+        return this._maximized;
+    }
+    set disableDrag(value) {
+        this._disableDrag = value;
+        this._dragController.enabled = !this._disableDrag;
+    }
+    get disableDrag() {
+        return this._disableDrag;
+    }
+    set position(value) {
+        this._position = Number(value);
+        this.style.order = `${this._position}`;
+    }
+    get position() {
+        return this._position;
+    }
+    get gridColumnWidth() {
+        const tileManager = this._managerContext.instance.shadowRoot.querySelector("[part~='base']");
+        const gridTemplateColumns = getComputedStyle(tileManager).getPropertyValue('grid-template-columns');
+        const firstColumnWidth = Number.parseFloat(gridTemplateColumns.split(' ')[0]);
+        return firstColumnWidth || this._cachedStyles.minWidth;
+    }
+    constructor() {
+        super();
+        this._dragController = addTileDragAndDrop(this, {
+            dragStart: this.handleDragStart,
+            dragEnd: this.handleDragEnd,
+            dragEnter: this.handleDragEnter,
+            dragLeave: this.handleDragLeave,
+            dragOver: this.handleDragOver,
+            drop: this.handleDragLeave,
+        });
+        this._fullscreenController = addFullscreenController(this, this.emitFullScreenEvent);
+        this._colSpan = 1;
+        this._rowSpan = 1;
+        this._colStart = null;
+        this._rowStart = null;
+        this._position = -1;
+        this._disableDrag = false;
+        this._maximized = false;
+        this._initialPointerX = null;
+        this._initialPointerY = null;
+        this._dragCounter = 0;
+        this._dragGhost = null;
+        this._dragImage = null;
+        this._cachedStyles = {};
+        this._context = new ContextProvider(this, {
+            context: tileContext,
+            initialValue: {
+                instance: this,
+                setFullscreenState: (fullscreen, isUserTriggered) => this._fullscreenController.setState(fullscreen, isUserTriggered),
+            },
+        });
+        this._isDragging = false;
+        this._hasDragOver = false;
+        this._isResizing = false;
+        this.tileId = null;
+        this.disableResize = false;
+        this.ghostFactory = () => {
+            this.cacheStyles();
+            const ghost = document.createElement('div');
+            Object.assign(ghost.style, {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                zIndex: 1000,
+                background: this._cachedStyles.background,
+                border: `1px solid ${this._cachedStyles.border}`,
+                borderRadius: this._cachedStyles.borderRadius,
+                width: '100%',
+                height: '100%',
+                gridRow: '',
+                gridColumn: '',
+            });
+            return ghost;
+        };
+        this._setTileContext();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.tileId = this.tileId || `tile-${IgcTileComponent_1.increment()}`;
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        const parts = partNameMap({
+            dragging: this._isDragging,
+            resizing: this._isResizing,
+        });
+        if (parts.trim()) {
+            this.setAttribute('part', parts);
+        }
+        else {
+            this.removeAttribute('part');
+        }
+    }
+    emitFullScreenEvent(state) {
+        return this.emitEvent('igcTileFullscreen', {
+            detail: { tile: this, state },
+            cancelable: true,
+        });
+    }
+    assignDragImage(e) {
+        const rect = this.getBoundingClientRect();
+        const offsetX = e.clientX - rect.left;
+        const offsetY = e.clientY - rect.top;
+        const compStyles = getComputedStyle(this);
+        this.cacheStyles();
+        this._dragImage = this.cloneNode(true);
+        Object.assign(this._dragImage.style, {
+            width: compStyles.width,
+            height: compStyles.height,
+            position: 'absolute',
+            top: '-99999px',
+            left: '-99999px',
+            background: this._cachedStyles.tileBackground,
+            border: `1px solid ${this._cachedStyles.tileBorder}`,
+            borderRadius: this._cachedStyles.borderRadius,
+            overflow: 'hidden',
+        });
+        document.body.append(this._dragImage);
+        e.dataTransfer.setDragImage(this._dragImage, offsetX, offsetY);
+        e.dataTransfer.effectAllowed = 'move';
+    }
+    handleDragStart(e) {
+        this.assignDragImage(e);
+        this.emitEvent('tileDragStart', { detail: this });
+        this._dragGhost = this.ghostFactory();
+        this._dragGhost.inert = true;
+        if (this._dragGhost) {
+            this.append(this._dragGhost);
+        }
+        this._isDragging = true;
+    }
+    handleDragEnter() {
+        this._dragCounter++;
+        this._hasDragOver = true;
+    }
+    handleDragOver(event) {
+        if (!this._draggedItem) {
+            return;
+        }
+        if (isSameTile(this, this._draggedItem)) {
+            this._tileContent.style.visibility = 'hidden';
+            if (this._dragGhost) {
+                Object.assign(this._dragGhost.style, {
+                    visibility: 'visible',
+                });
+            }
+            if (this._managerContext) {
+                this._managerContext.lastSwapTile = null;
+            }
+        }
+        else if (this._isSlideMode) {
+            if (this._managerContext &&
+                (!this._managerContext.lastSwapTile ||
+                    this.hasPointerLeftLastSwapTile(event, this._managerContext.lastSwapTile))) {
+                this._managerContext.lastSwapTile = this;
+                swapTiles(this, this._draggedItem);
+            }
+        }
+    }
+    handleDragLeave() {
+        this._dragCounter--;
+        if (this._dragCounter === 0) {
+            this._hasDragOver = false;
+        }
+    }
+    handleDragEnd() {
+        this.emitEvent('tileDragEnd', { detail: this });
+        this._isDragging = false;
+        if (this._dragGhost) {
+            this._dragGhost.remove();
+            this._dragGhost = null;
+        }
+        if (this._dragImage) {
+            this._dragImage.remove();
+            this._dragImage = null;
+        }
+        this._tileContent.style.visibility = 'visible';
+    }
+    hasPointerLeftLastSwapTile(event, lastSwapTile) {
+        if (!lastSwapTile)
+            return false;
+        const rect = lastSwapTile.getBoundingClientRect();
+        const pointerX = event.clientX;
+        const pointerY = event.clientY;
+        const outsideBoundaries = pointerX < rect.left ||
+            pointerX > rect.right ||
+            pointerY < rect.top ||
+            pointerY > rect.bottom;
+        if (outsideBoundaries && this._managerContext) {
+            this._managerContext.lastSwapTile = null;
+        }
+        return outsideBoundaries;
+    }
+    cacheStyles() {
+        const tileComputedStyle = getComputedStyle(this);
+        const parentWrapper = this.parentElement.shadowRoot.querySelector('[part="base"]');
+        const tileManagerComputedStyle = getComputedStyle(parentWrapper);
+        const gap = Number.parseFloat(tileManagerComputedStyle.getPropertyValue('grid-gap')) || 0;
+        const rowHeights = tileManagerComputedStyle.gridTemplateRows
+            .split(' ')
+            .map((height) => Number.parseFloat(height.trim()));
+        this._cachedStyles = {
+            columnCount: Number.parseFloat(tileComputedStyle.getPropertyValue('--ig-column-count')),
+            background: tileComputedStyle.getPropertyValue('--placeholder-background'),
+            tileBackground: tileComputedStyle.getPropertyValue('--tile-background'),
+            tileBorder: tileComputedStyle.getPropertyValue('--hover-border-color'),
+            border: tileComputedStyle.getPropertyValue('--ghost-border'),
+            borderRadius: tileComputedStyle.getPropertyValue('--border-radius'),
+            minWidth: Number.parseFloat(tileComputedStyle.getPropertyValue('--ig-min-col-width')),
+            minHeight: Number.parseFloat(tileComputedStyle.getPropertyValue('--ig-min-row-height')),
+            initialTop: parentWrapper.getBoundingClientRect().top,
+            rowHeights,
+            gap,
+        };
+    }
+    _handleResizeStart(event) {
+        const ghostElement = event.detail.state.ghost;
+        this._initialPointerX = event.detail.event.clientX;
+        this._initialPointerY = event.detail.event.clientY;
+        if (ghostElement) {
+            ghostElement.style.minWidth = `${this._cachedStyles.minWidth}px`;
+            ghostElement.style.minHeight = `${this._cachedStyles.minHeight}px`;
+        }
+    }
+    _handleResize(event) {
+        this._isResizing = true;
+        const ghostElement = event.detail.state.current;
+        const rowHeights = this._cachedStyles.rowHeights;
+        if (ghostElement) {
+            const deltaX = event.detail.event.clientX - this._initialPointerX;
+            const deltaY = event.detail.event.clientY - this._initialPointerY;
+            const snappedWidth = ResizeUtil.calculateSnappedWidth(deltaX, event.detail.state.initial.width, this._cachedStyles.gap, this.gridColumnWidth);
+            const actualTop = this._cachedStyles.initialTop + window.scrollY;
+            const initialTop = event.detail.state.initial.top + window.scrollY;
+            const actualBottom = event.detail.state.initial.bottom + window.scrollY;
+            const startingY = actualBottom - actualTop;
+            const snappedHeight = ResizeUtil.calculateSnappedHeight(deltaY, startingY, rowHeights, this._cachedStyles.gap, initialTop, event.detail.state.initial.height);
+            ghostElement.width = snappedWidth;
+            ghostElement.height = snappedHeight;
+        }
+    }
+    _handleResizeEnd(event) {
+        const state = event.detail.state;
+        const width = state.current.width;
+        const height = state.current.height;
+        const colSpan = Math.max(1, Math.round(width / this.gridColumnWidth));
+        const initialTop = event.detail.state.initial.top + window.scrollY;
+        const startRowIndex = ResizeUtil.calculate(initialTop, this._cachedStyles.rowHeights, this._cachedStyles.gap).targetIndex;
+        const initialSpan = this._calculateRowSpan(state.initial.height, startRowIndex);
+        const currentSpan = this._calculateRowSpan(height, startRowIndex);
+        const deltaY = event.detail.event.clientY - this._initialPointerY;
+        const rowSpan = deltaY > 0
+            ? Math.max(initialSpan, currentSpan)
+            : Math.min(initialSpan, currentSpan);
+        Object.assign(state.ghost.style, {
+            width: '',
+            height: '',
+        });
+        this.style.setProperty('grid-row', `span ${rowSpan}`);
+        this.style.setProperty('grid-column', `span ${colSpan}`);
+        this._isResizing = false;
+        this._initialPointerX = null;
+        this._initialPointerY = null;
+        this._cachedStyles = {};
+    }
+    _calculateRowSpan(height, startRowIndex) {
+        const gap = this._cachedStyles.gap;
+        const rowHeights = this._cachedStyles.rowHeights;
+        let accumulatedHeight = 0;
+        for (let i = 0; i < rowHeights.length; i++) {
+            const rowHeight = rowHeights[startRowIndex + i];
+            const rowGap = startRowIndex + i > 0 ? gap : 0;
+            const halfwayThreshold = accumulatedHeight + rowHeight / 2 + rowGap;
+            accumulatedHeight += rowHeight + rowGap;
+            if (height >= halfwayThreshold && height <= accumulatedHeight) {
+                return i + 1;
+            }
+        }
+        return 1;
+    }
+    renderContent() {
+        const parts = partNameMap({
+            base: true,
+            'drag-over': this._hasDragOver && !this._isSlideMode,
+            fullscreen: this.fullscreen,
+            draggable: !this.disableDrag,
+            dragging: this._isDragging,
+            resizable: !this.disableResize,
+            resizing: this._isResizing,
+            maximized: this.maximized,
+        });
+        const styles = {
+            '--ig-col-span': this._colSpan,
+            '--ig-row-span': this._rowSpan,
+            '--ig-col-start': this._colStart,
+            '--ig-row-start': this._rowStart,
+        };
+        return html `
+      <div part=${parts} .inert=${this._hasDragOver} style=${styleMap(styles)}>
+        <slot name="header"></slot>
+        <div part="content-container">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+    render() {
+        const renderResize = this.disableResize || this.maximized || this.fullscreen;
+        return renderResize
+            ? this.renderContent()
+            : html `
+          <igc-resize
+            part="resize"
+            .ghostFactory=${this.ghostFactory}
+            mode="deferred"
+            @igcResizeStart=${this._handleResizeStart}
+            @igcResize=${this._handleResize}
+            @igcResizeEnd=${this._handleResizeEnd}
+          >
+            ${this.renderContent()}
+          </igc-resize>
+        `;
+    }
+};
+IgcTileComponent.tagName = 'igc-tile';
+IgcTileComponent.styles = [styles, shared];
+IgcTileComponent.increment = createCounter();
+__decorate([
+    consume({ context: tileManagerContext, subscribe: true })
+], IgcTileComponent.prototype, "_managerContext", void 0);
+__decorate([
+    query('[part="ghost"]', true)
+], IgcTileComponent.prototype, "_ghost", void 0);
+__decorate([
+    query('[part~="base"]', true)
+], IgcTileComponent.prototype, "_tileContent", void 0);
+__decorate([
+    state()
+], IgcTileComponent.prototype, "_isDragging", void 0);
+__decorate([
+    state()
+], IgcTileComponent.prototype, "_hasDragOver", void 0);
+__decorate([
+    state()
+], IgcTileComponent.prototype, "_isResizing", void 0);
+__decorate([
+    property({ attribute: 'tile-id', type: String, reflect: true })
+], IgcTileComponent.prototype, "tileId", void 0);
+__decorate([
+    property({ type: Number })
+], IgcTileComponent.prototype, "colSpan", null);
+__decorate([
+    property({ type: Number })
+], IgcTileComponent.prototype, "rowSpan", null);
+__decorate([
+    property({ type: Number })
+], IgcTileComponent.prototype, "colStart", null);
+__decorate([
+    property({ type: Number })
+], IgcTileComponent.prototype, "rowStart", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IgcTileComponent.prototype, "fullscreen", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IgcTileComponent.prototype, "maximized", null);
+__decorate([
+    property({ attribute: 'disable-drag', type: Boolean, reflect: true })
+], IgcTileComponent.prototype, "disableDrag", null);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'disable-resize' })
+], IgcTileComponent.prototype, "disableResize", void 0);
+__decorate([
+    property({ type: Number })
+], IgcTileComponent.prototype, "position", null);
+IgcTileComponent = IgcTileComponent_1 = __decorate([
+    themes(all)
+], IgcTileComponent);
+export default IgcTileComponent;
+//# sourceMappingURL=tile.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tile.js","sourceRoot":"","sources":["../../../src/components/tile-manager/tile.ts"],"names":[],"mappings":"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","sourcesContent":["import { ContextProvider, consume } from '@lit/context';\nimport { LitElement, type PropertyValues, html } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport {\n  type TileManagerContext,\n  tileContext,\n  tileManagerContext,\n} from '../common/context.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 { asNumber, createCounter, partNameMap } from '../common/util.js';\nimport { addFullscreenController } from './controllers/fullscreen.js';\nimport { addTileDragAndDrop } from './controllers/tile-dnd.js';\nimport { isSameTile, swapTiles } from './position.js';\nimport type { ResizeCallbackParams } from './resize-controller.js';\nimport IgcResizeComponent from './resize-element.js';\nimport { styles as shared } from './themes/shared/tile/tile.common.css.js';\nimport { styles } from './themes/tile.base.css.js';\nimport { all } from './themes/tile.js';\nimport IgcTileHeaderComponent from './tile-header.js';\nimport { ResizeUtil } from './tile-util.js';\n\ntype IgcTileChangeState = {\n  tile: IgcTileComponent;\n  state: boolean;\n};\n\n// REVIEW: Decide whether to re-emit the events from the manager of leave them up to bubble naturally\nexport interface IgcTileComponentEventMap {\n  igcTileFullscreen: CustomEvent<IgcTileChangeState>;\n  igcTileMaximize: CustomEvent<IgcTileChangeState>;\n  tileDragStart: CustomEvent<IgcTileComponent>;\n  tileDragEnd: CustomEvent<IgcTileComponent>;\n  igcResizeStart: CustomEvent<IgcTileComponent>;\n  igcResizeMove: CustomEvent<IgcTileComponent>;\n  igcResizeEnd: CustomEvent<IgcTileComponent>;\n}\n\n/**\n * The tile component is used within the `igc-tile-manager` as a container\n * for displaying various types of information.\n *\n * @element igc-tile\n *\n * @fires igcTileFullscreen - Fired when tile fullscreen state changes.\n * @fires igcTileMaximize - Fired when tile maximize state changes.\n * @fires igcResizeStart - Fired when tile begins resizing.\n * @fires igcResizeMove - Fired when tile is being resized.\n * @fires igcResizeEnd - Fired when tile finishes resizing.\n */\n@themes(all)\nexport default class IgcTileComponent extends EventEmitterMixin<\n  IgcTileComponentEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-tile';\n  public static styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(\n      IgcTileComponent,\n      IgcTileHeaderComponent,\n      IgcResizeComponent\n    );\n  }\n\n  private static readonly increment = createCounter();\n\n  private _dragController = addTileDragAndDrop(this, {\n    dragStart: this.handleDragStart,\n    dragEnd: this.handleDragEnd,\n    dragEnter: this.handleDragEnter,\n    dragLeave: this.handleDragLeave,\n    dragOver: this.handleDragOver,\n    drop: this.handleDragLeave,\n  });\n\n  private _fullscreenController = addFullscreenController(\n    this,\n    this.emitFullScreenEvent\n  );\n\n  private _colSpan = 1;\n  private _rowSpan = 1;\n  private _colStart: number | null = null;\n  private _rowStart: number | null = null;\n  private _position = -1;\n  private _disableDrag = false;\n  private _maximized = false;\n  private _initialPointerX: number | null = null;\n  private _initialPointerY: number | null = null;\n  private _dragCounter = 0;\n  private _dragGhost: HTMLElement | null = null;\n  private _dragImage: HTMLElement | null = null;\n  private _cachedStyles: {\n    background?: string;\n    border?: string;\n    borderRadius?: string;\n    columnCount?: number;\n    gap?: number;\n    initialTop?: number;\n    minHeight?: number;\n    minWidth?: number;\n    tileBackground?: string;\n    tileBorder?: string;\n    rowHeights?: number[];\n  } = {};\n\n  // Tile manager context properties and helpers\n\n  @consume({ context: tileManagerContext, subscribe: true })\n  private _managerContext?: TileManagerContext;\n\n  private _context = new ContextProvider(this, {\n    context: tileContext,\n    initialValue: {\n      instance: this,\n      setFullscreenState: (fullscreen, isUserTriggered) =>\n        this._fullscreenController.setState(fullscreen, isUserTriggered),\n    },\n  });\n\n  private _setTileContext() {\n    this._context.setValue(\n      {\n        instance: this,\n        setFullscreenState: (fullscreen, isUserTriggered) =>\n          this._fullscreenController.setState(fullscreen, isUserTriggered),\n      },\n      true\n    );\n  }\n\n  private get _draggedItem(): IgcTileComponent | null {\n    return this._managerContext?.draggedItem ?? null;\n  }\n\n  private get _isSlideMode(): boolean {\n    return this._managerContext\n      ? this._managerContext.instance.dragMode === 'slide'\n      : true;\n  }\n\n  @query('[part=\"ghost\"]', true)\n  public _ghost!: HTMLElement;\n\n  @query('[part~=\"base\"]', true)\n  public _tileContent!: HTMLElement;\n\n  @state()\n  private _isDragging = false;\n\n  @state()\n  private _hasDragOver = false;\n\n  @state()\n  private _isResizing = false;\n\n  /**\n   * The unique identifier of the tile.\n   * @attr\n   */\n  @property({ attribute: 'tile-id', type: String, reflect: true })\n  public tileId: string | null = null;\n\n  @property({ type: Number })\n  public set colSpan(value: number) {\n    this._colSpan = Math.max(1, asNumber(value));\n    this.style.setProperty('--ig-col-span', this._colSpan.toString());\n  }\n\n  public get colSpan(): number {\n    return this._colSpan;\n  }\n\n  @property({ type: Number })\n  public set rowSpan(value: number) {\n    this._rowSpan = Math.max(1, asNumber(value));\n    this.style.setProperty('--ig-row-span', this._rowSpan.toString());\n  }\n\n  public get rowSpan(): number {\n    return this._rowSpan;\n  }\n\n  @property({ type: Number })\n  public set colStart(value: number) {\n    this._colStart = Math.max(0, asNumber(value)) || null;\n    this.style.setProperty(\n      '--ig-col-start',\n      this._colStart ? this._colStart.toString() : null\n    );\n  }\n\n  public get colStart(): number | null {\n    return this._colStart;\n  }\n\n  @property({ type: Number })\n  public set rowStart(value: number) {\n    this._rowStart = Math.max(0, asNumber(value)) || null;\n    this.style.setProperty(\n      '--ig-row-start',\n      this._rowStart ? this._rowStart.toString() : null\n    );\n  }\n\n  public get rowStart(): number | null {\n    return this._rowStart;\n  }\n\n  /**\n   * Indicates whether the tile occupies the whole screen.\n   * @attr fullscreen\n   */\n  @property({ type: Boolean, reflect: true })\n  public set fullscreen(value: boolean) {\n    this._fullscreenController.setState(value);\n  }\n\n  public get fullscreen(): boolean {\n    return this._fullscreenController.fullscreen;\n  }\n\n  /**\n   * Indicates whether the tile occupies all available space within the layout.\n   * @attr maximized\n   */\n  @property({ type: Boolean, reflect: true })\n  public set maximized(value: boolean) {\n    this._maximized = value;\n    this._setTileContext();\n\n    if (this._managerContext) {\n      this._managerContext.instance.requestUpdate();\n    }\n  }\n\n  public get maximized() {\n    return this._maximized;\n  }\n\n  /**\n   * Indicates whether the tile can be dragged.\n   * @attr disable-drag\n   */\n  @property({ attribute: 'disable-drag', type: Boolean, reflect: true })\n  public set disableDrag(value: boolean) {\n    this._disableDrag = value;\n    this._dragController.enabled = !this._disableDrag;\n  }\n\n  public get disableDrag() {\n    return this._disableDrag;\n  }\n\n  /**\n   * Indicates whether the tile can be resized.\n   * @attr disable-resize\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'disable-resize' })\n  public disableResize = false;\n\n  /**\n   * Gets/sets the tile's visual position in the layout.\n   * Corresponds to the CSS order property.\n   * @attr\n   */\n  @property({ type: Number })\n  public set position(value: number) {\n    this._position = Number(value);\n    this.style.order = `${this._position}`;\n  }\n\n  public get position() {\n    return this._position;\n  }\n\n  protected get gridColumnWidth(): number {\n    const tileManager =\n      this._managerContext!.instance!.shadowRoot!.querySelector(\n        \"[part~='base']\"\n      )!;\n\n    const gridTemplateColumns = getComputedStyle(tileManager).getPropertyValue(\n      'grid-template-columns'\n    );\n    const firstColumnWidth = Number.parseFloat(\n      gridTemplateColumns.split(' ')[0]\n    );\n\n    return firstColumnWidth || this._cachedStyles.minWidth!;\n  }\n\n  constructor() {\n    super();\n    this._setTileContext();\n  }\n\n  public override connectedCallback() {\n    super.connectedCallback();\n    this.tileId = this.tileId || `tile-${IgcTileComponent.increment()}`;\n  }\n\n  protected override updated(changedProperties: PropertyValues) {\n    super.updated(changedProperties);\n\n    const parts = partNameMap({\n      dragging: this._isDragging,\n      resizing: this._isResizing,\n    });\n\n    if (parts.trim()) {\n      this.setAttribute('part', parts);\n    } else {\n      this.removeAttribute('part');\n    }\n  }\n\n  private emitFullScreenEvent(state: boolean) {\n    return this.emitEvent('igcTileFullscreen', {\n      detail: { tile: this, state },\n      cancelable: true,\n    });\n  }\n\n  private assignDragImage(e: DragEvent) {\n    const rect = this.getBoundingClientRect();\n    const offsetX = e.clientX - rect.left;\n    const offsetY = e.clientY - rect.top;\n    const compStyles = getComputedStyle(this);\n    this.cacheStyles();\n\n    this._dragImage = this.cloneNode(true) as HTMLElement;\n    Object.assign(this._dragImage.style, {\n      width: compStyles.width,\n      height: compStyles.height,\n      position: 'absolute',\n      top: '-99999px',\n      left: '-99999px',\n      background: this._cachedStyles.tileBackground,\n      border: `1px solid ${this._cachedStyles.tileBorder}`,\n      borderRadius: this._cachedStyles.borderRadius,\n      overflow: 'hidden',\n    });\n\n    document.body.append(this._dragImage);\n\n    e.dataTransfer!.setDragImage(this._dragImage, offsetX, offsetY);\n    e.dataTransfer!.effectAllowed = 'move';\n  }\n\n  private handleDragStart(e: DragEvent) {\n    this.assignDragImage(e);\n\n    this.emitEvent('tileDragStart', { detail: this });\n    this._dragGhost = this.ghostFactory();\n    this._dragGhost.inert = true;\n\n    if (this._dragGhost) {\n      this.append(this._dragGhost);\n    }\n    this._isDragging = true;\n  }\n\n  private handleDragEnter() {\n    this._dragCounter++;\n    this._hasDragOver = true;\n  }\n\n  private handleDragOver(event: DragEvent) {\n    if (!this._draggedItem) {\n      return;\n    }\n\n    if (isSameTile(this, this._draggedItem)) {\n      this._tileContent.style.visibility = 'hidden';\n      if (this._dragGhost) {\n        Object.assign(this._dragGhost.style, {\n          visibility: 'visible',\n        });\n      }\n      if (this._managerContext) {\n        this._managerContext.lastSwapTile = null;\n      }\n    } else if (this._isSlideMode) {\n      if (\n        this._managerContext &&\n        (!this._managerContext.lastSwapTile ||\n          this.hasPointerLeftLastSwapTile(\n            event,\n            this._managerContext.lastSwapTile\n          ))\n      ) {\n        this._managerContext.lastSwapTile = this;\n        swapTiles(this, this._draggedItem!);\n      }\n    }\n  }\n\n  private handleDragLeave() {\n    this._dragCounter--;\n\n    // The drag leave is fired on entering a child element\n    // so we check if the dragged item is actually leaving the tile\n    if (this._dragCounter === 0) {\n      this._hasDragOver = false;\n    }\n  }\n\n  private handleDragEnd() {\n    this.emitEvent('tileDragEnd', { detail: this });\n    this._isDragging = false;\n\n    if (this._dragGhost) {\n      this._dragGhost.remove();\n      this._dragGhost = null;\n    }\n\n    if (this._dragImage) {\n      this._dragImage.remove();\n      this._dragImage = null;\n    }\n\n    this._tileContent.style.visibility = 'visible';\n  }\n\n  private hasPointerLeftLastSwapTile(\n    event: DragEvent,\n    lastSwapTile: IgcTileComponent | null\n  ) {\n    if (!lastSwapTile) return false;\n\n    // Check if the pointer is outside the boundaries of the last swapped tile\n\n    const rect = lastSwapTile.getBoundingClientRect();\n    const pointerX = event.clientX;\n    const pointerY = event.clientY;\n\n    const outsideBoundaries =\n      pointerX < rect.left ||\n      pointerX > rect.right ||\n      pointerY < rect.top ||\n      pointerY > rect.bottom;\n\n    if (outsideBoundaries && this._managerContext) {\n      this._managerContext.lastSwapTile = null;\n    }\n\n    return outsideBoundaries;\n  }\n\n  private cacheStyles() {\n    //use util\n    const tileComputedStyle = getComputedStyle(this);\n    const parentWrapper =\n      this.parentElement!.shadowRoot!.querySelector('[part=\"base\"]')!;\n    const tileManagerComputedStyle = getComputedStyle(parentWrapper);\n\n    const gap =\n      Number.parseFloat(\n        tileManagerComputedStyle.getPropertyValue('grid-gap')\n      ) || 0;\n    const rowHeights = tileManagerComputedStyle.gridTemplateRows\n      .split(' ')\n      .map((height) => Number.parseFloat(height.trim()));\n\n    this._cachedStyles = {\n      columnCount: Number.parseFloat(\n        tileComputedStyle.getPropertyValue('--ig-column-count')\n      ),\n      background: tileComputedStyle.getPropertyValue(\n        '--placeholder-background'\n      ),\n      tileBackground: tileComputedStyle.getPropertyValue('--tile-background'),\n      tileBorder: tileComputedStyle.getPropertyValue('--hover-border-color'),\n      border: tileComputedStyle.getPropertyValue('--ghost-border'),\n      borderRadius: tileComputedStyle.getPropertyValue('--border-radius'),\n      minWidth: Number.parseFloat(\n        tileComputedStyle.getPropertyValue('--ig-min-col-width')\n      ),\n      minHeight: Number.parseFloat(\n        tileComputedStyle.getPropertyValue('--ig-min-row-height')\n      ),\n      initialTop: parentWrapper.getBoundingClientRect().top,\n      rowHeights,\n      gap,\n    };\n  }\n\n  private _handleResizeStart(event: CustomEvent<ResizeCallbackParams>) {\n    const ghostElement = event.detail.state.ghost;\n    this._initialPointerX = event.detail.event.clientX;\n    this._initialPointerY = event.detail.event.clientY;\n\n    if (ghostElement) {\n      ghostElement.style.minWidth = `${this._cachedStyles.minWidth!}px`;\n      ghostElement.style.minHeight = `${this._cachedStyles.minHeight!}px`;\n    }\n  }\n\n  private _handleResize(event: CustomEvent<ResizeCallbackParams>) {\n    this._isResizing = true;\n\n    const ghostElement = event.detail.state.current;\n    const rowHeights = this._cachedStyles.rowHeights!;\n\n    if (ghostElement) {\n      const deltaX = event.detail.event.clientX - this._initialPointerX!;\n      const deltaY = event.detail.event.clientY - this._initialPointerY!;\n\n      const snappedWidth = ResizeUtil.calculateSnappedWidth(\n        deltaX,\n        event.detail.state.initial.width,\n        this._cachedStyles.gap!,\n        this.gridColumnWidth\n      );\n\n      const actualTop = this._cachedStyles.initialTop! + window.scrollY;\n      const initialTop = event.detail.state.initial.top + window.scrollY;\n      const actualBottom = event.detail.state.initial.bottom + window.scrollY;\n\n      const startingY = actualBottom - actualTop;\n\n      const snappedHeight = ResizeUtil.calculateSnappedHeight(\n        deltaY,\n        startingY,\n        rowHeights,\n        this._cachedStyles.gap!,\n        initialTop,\n        event.detail.state.initial.height\n      );\n\n      ghostElement.width = snappedWidth;\n      ghostElement.height = snappedHeight;\n    }\n  }\n\n  private _handleResizeEnd(event: CustomEvent<ResizeCallbackParams>) {\n    const state = event.detail.state;\n    const width = state.current.width;\n    const height = state.current.height;\n\n    const colSpan = Math.max(1, Math.round(width / this.gridColumnWidth));\n\n    const initialTop = event.detail.state.initial.top + window.scrollY;\n    const startRowIndex = ResizeUtil.calculate(\n      initialTop,\n      this._cachedStyles.rowHeights!,\n      this._cachedStyles.gap!\n    ).targetIndex;\n\n    const initialSpan = this._calculateRowSpan(\n      state.initial.height,\n      startRowIndex\n    );\n    const currentSpan = this._calculateRowSpan(height, startRowIndex);\n\n    const deltaY = event.detail.event.clientY - this._initialPointerY!;\n    const rowSpan =\n      deltaY > 0\n        ? Math.max(initialSpan, currentSpan)\n        : Math.min(initialSpan, currentSpan);\n\n    // REVIEW\n    Object.assign(state.ghost!.style, {\n      width: '',\n      height: '',\n    });\n\n    this.style.setProperty('grid-row', `span ${rowSpan}`);\n    this.style.setProperty('grid-column', `span ${colSpan}`);\n\n    this._isResizing = false;\n    this._initialPointerX = null;\n    this._initialPointerY = null;\n    this._cachedStyles = {};\n  }\n\n  private _calculateRowSpan(height: number, startRowIndex: number): number {\n    const gap = this._cachedStyles.gap!;\n    const rowHeights = this._cachedStyles.rowHeights!;\n    let accumulatedHeight = 0;\n\n    for (let i = 0; i < rowHeights.length; i++) {\n      const rowHeight = rowHeights[startRowIndex + i];\n      const rowGap = startRowIndex + i > 0 ? gap : 0;\n      const halfwayThreshold = accumulatedHeight + rowHeight / 2 + rowGap;\n\n      accumulatedHeight += rowHeight + rowGap;\n\n      if (height >= halfwayThreshold && height <= accumulatedHeight) {\n        return i + 1;\n      }\n    }\n\n    // Default to the first row\n    return 1;\n  }\n\n  // REVIEW\n  protected ghostFactory = () => {\n    this.cacheStyles();\n\n    const ghost = document.createElement('div');\n    Object.assign(ghost.style, {\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      zIndex: 1000,\n      background: this._cachedStyles.background,\n      border: `1px solid ${this._cachedStyles.border}`,\n      borderRadius: this._cachedStyles.borderRadius,\n      width: '100%',\n      height: '100%',\n      gridRow: '',\n      gridColumn: '',\n    });\n\n    return ghost;\n  };\n\n  protected renderContent() {\n    const parts = partNameMap({\n      base: true,\n      'drag-over': this._hasDragOver && !this._isSlideMode,\n      fullscreen: this.fullscreen,\n      draggable: !this.disableDrag,\n      dragging: this._isDragging,\n      resizable: !this.disableResize,\n      resizing: this._isResizing,\n      maximized: this.maximized,\n    });\n\n    const styles = {\n      '--ig-col-span': this._colSpan,\n      '--ig-row-span': this._rowSpan,\n      '--ig-col-start': this._colStart,\n      '--ig-row-start': this._rowStart,\n    };\n\n    return html`\n      <div part=${parts} .inert=${this._hasDragOver} style=${styleMap(styles)}>\n        <slot name=\"header\"></slot>\n        <div part=\"content-container\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  protected override render() {\n    const renderResize =\n      this.disableResize || this.maximized || this.fullscreen;\n\n    return renderResize\n      ? this.renderContent()\n      : html`\n          <igc-resize\n            part=\"resize\"\n            .ghostFactory=${this.ghostFactory}\n            mode=\"deferred\"\n            @igcResizeStart=${this._handleResizeStart}\n            @igcResize=${this._handleResize}\n            @igcResizeEnd=${this._handleResizeEnd}\n          >\n            ${this.renderContent()}\n          </igc-resize>\n        `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-tile': IgcTileComponent;\n  }\n}\n"]}