igniteui-webcomponents 5.2.4 → 5.3.0-beta.0

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

@@ -0,0 +1,281 @@
+import { asNumber, first } from '../common/util.js';
+export const DraggedTileAttribute = 'data-drag-ghost-tile';
+const CssValues = new RegExp(/(?<start>\d+)?\s*\/?\s*span\s*(?<span>\d+)?/gi);
+function parseTileGridRect(tile) {
+    const computed = getComputedStyle(tile);
+    const { gridColumn, gridRow } = computed;
+    const [column, row] = [
+        first(Array.from(gridColumn.matchAll(CssValues))).groups,
+        first(Array.from(gridRow.matchAll(CssValues))).groups,
+    ];
+    return {
+        column: {
+            start: asNumber(column.start, -1),
+            span: asNumber(column.span, -1),
+        },
+        row: { start: asNumber(row.start, -1), span: asNumber(row.span, -1) },
+    };
+}
+function parseTileParentGrid(gridContainer) {
+    const computed = getComputedStyle(gridContainer);
+    const { gap, gridTemplateColumns, gridTemplateRows } = computed;
+    const columns = gridTemplateColumns.split(' ').map(asNumber);
+    const rows = gridTemplateRows.split(' ').map(asNumber);
+    return {
+        gap: asNumber(gap),
+        columns: {
+            count: columns.length,
+            entries: columns,
+            minSize: asNumber(computed.getPropertyValue('--ig-min-col-width')),
+        },
+        rows: {
+            count: rows.length,
+            entries: rows,
+            minSize: asNumber(computed.getPropertyValue('--ig-min-row-height')),
+        },
+    };
+}
+class TileResizeState {
+    constructor() {
+        this._gap = 0;
+        this._prevDeltaX = 0;
+        this._prevDeltaY = 0;
+        this._prevSnappedWidth = 0;
+        this._prevSnappedHeight = 0;
+        this._position = {
+            column: { start: 0, span: 0 },
+            row: { start: 0, span: 0 },
+        };
+        this._columns = {
+            count: 0,
+            entries: [],
+            minSize: 0,
+        };
+        this._rows = {
+            count: 0,
+            entries: [],
+            minSize: 0,
+        };
+    }
+    get gap() {
+        return this._gap;
+    }
+    get position() {
+        return structuredClone(this._position);
+    }
+    get columns() {
+        return structuredClone(this._columns);
+    }
+    get rows() {
+        return structuredClone(this._rows);
+    }
+    calculateSnappedWidth(state) {
+        const result = this.calculateSnappedDimension(state.current.width, state.deltaX, this._prevDeltaX, this._columns.entries, this._position.column.start, this._prevSnappedWidth, this._columns.minSize);
+        this._prevDeltaX = result.newDelta;
+        this._prevSnappedWidth = result.snapped;
+        return result.snapped;
+    }
+    calculateSnappedHeight(state) {
+        const result = this.calculateSnappedDimension(state.current.height, state.deltaY, this._prevDeltaY, this._rows.entries, this._position.row.start, this._prevSnappedHeight, this._rows.minSize);
+        this._prevDeltaY = result.newDelta;
+        this._prevSnappedHeight = result.snapped;
+        return result.snapped;
+    }
+    updateState(tileRect, tile, grid) {
+        this.initState(grid, tile);
+        this.calculateTileStartPosition(grid, tileRect);
+    }
+    getResizedPosition(rect) {
+        const { column, row } = this._initialPosition;
+        this._position.column.span = this.calculateResizedSpan(rect.width, this._position.column, this._columns.entries);
+        this._position.row.span = this.calculateResizedSpan(rect.height, this._position.row, this._rows.entries, this._rows.minSize, true);
+        const cssColumn = `${column.start < 0 ? 'auto' : column.start} / span ${this._position.column.span}`;
+        const cssRow = `${row.start < 0 ? 'auto' : row.start} / span ${this._position.row.span}`;
+        return { column: cssColumn, row: cssRow };
+    }
+    calculateResizedSize(grid) {
+        const { columns, rows } = parseTileParentGrid(grid);
+        const width = this.calculateSizeFromEntries(columns.entries);
+        const height = this.calculateSizeFromEntries(rows.entries, true);
+        return { width, height };
+    }
+    adjustTileGridPosition(tiles) {
+        const columnCount = this.columns.count;
+        for (const tile of tiles) {
+            const colStart = tile.colStart || 0;
+            const colSpan = tile.colSpan || 0;
+            if (colStart > columnCount) {
+                tile.colSpan = 1;
+                tile.colStart = columnCount;
+                continue;
+            }
+            if (colStart + colSpan - 1 > columnCount) {
+                tile.colSpan = columnCount - colStart + 1;
+            }
+        }
+    }
+    calculateSnappedDimension(currentSize, currentDelta, prevDelta, gridEntries, startIndex, prevSnapped, minSize) {
+        const effectiveDelta = currentDelta - prevDelta;
+        let snapped = currentSize;
+        if (Math.trunc(currentSize) < minSize) {
+            return { snapped: gridEntries[startIndex], newDelta: currentDelta };
+        }
+        if (effectiveDelta === 0 && prevSnapped) {
+            return { snapped: prevSnapped, newDelta: currentDelta };
+        }
+        let accumulated = 0;
+        for (let i = startIndex - 1; i < gridEntries.length; i++) {
+            const currentEntry = gridEntries[i];
+            const nextEntry = gridEntries[i + 1] ?? currentEntry;
+            const prevEntry = i > 0 ? gridEntries[i - 1] : currentEntry;
+            const halfwayExpand = accumulated + currentEntry + this.gap + nextEntry / 2;
+            const halfwayShrink = accumulated + prevEntry / 2;
+            const entryEnd = accumulated + currentEntry + this.gap;
+            if (effectiveDelta > 0) {
+                if (currentSize >= halfwayExpand &&
+                    currentSize <= entryEnd + nextEntry) {
+                    snapped = entryEnd + nextEntry;
+                }
+            }
+            else if (effectiveDelta < 0) {
+                if (currentSize <= halfwayShrink && currentSize > accumulated) {
+                    snapped = accumulated - this.gap;
+                }
+            }
+            accumulated += currentEntry + this.gap;
+        }
+        return { snapped, newDelta: currentDelta };
+    }
+    calculateResizedSpan(targetSize, tilePosition, sizes, minSize = 0, allowOverflow = false) {
+        let accumulatedSize = 0;
+        let newSpan = tilePosition.span;
+        const sizesAfterStart = sizes.slice(tilePosition.start - 1);
+        const availableSize = sizesAfterStart.reduce((sum, s) => sum + s, 0) +
+            (sizes.length - 1) * this.gap;
+        if (targetSize <= sizes[0] + this.gap) {
+            return 1;
+        }
+        if (targetSize > availableSize) {
+            const remainingSize = targetSize - availableSize;
+            return this.calculateAdditionalSpan(remainingSize, sizesAfterStart.length, minSize, allowOverflow);
+        }
+        for (let i = tilePosition.start - 1; i < sizes.length; i++) {
+            const currentSize = sizes[i];
+            const nextSize = sizes[i + 1] ?? currentSize;
+            const halfwayPoint = accumulatedSize + currentSize + this.gap + nextSize / 2;
+            if (targetSize > halfwayPoint) {
+                newSpan = i + 3 - tilePosition.start;
+            }
+            else {
+                break;
+            }
+            accumulatedSize += currentSize + this.gap;
+        }
+        return newSpan;
+    }
+    initState(grid, tile) {
+        const { gap, columns, rows } = parseTileParentGrid(grid);
+        this._initialPosition = parseTileGridRect(tile);
+        this._position = structuredClone(this._initialPosition);
+        this._gap = gap;
+        this._columns = columns;
+        this._rows = rows;
+        this._prevDeltaX = 0;
+        this._prevDeltaY = 0;
+        this._prevSnappedWidth = 0;
+        this._prevSnappedHeight = 0;
+    }
+    calculateTileStartPosition(grid, tileRect) {
+        if (this._position.column.start < 0) {
+            const offsetX = this.getGridOffset(grid, 'horizontal');
+            this._position.column.start = this.calculatePosition(tileRect.left + window.scrollX + grid.scrollLeft - offsetX, this._columns.entries);
+        }
+        if (this._position.row.start < 0) {
+            const offsetY = this.getGridOffset(grid, 'vertical');
+            this._position.row.start = this.calculatePosition(tileRect.top + window.scrollY - offsetY, this._rows.entries);
+        }
+    }
+    calculatePosition(targetPosition, sizes) {
+        const gap = this.gap;
+        let accumulatedSize = 0;
+        for (const [i, size] of sizes.entries()) {
+            accumulatedSize += size + gap;
+            if (Math.trunc(targetPosition) < Math.trunc(accumulatedSize - gap)) {
+                return i + 1;
+            }
+        }
+        return 1;
+    }
+    calculateAdditionalSpan(remainingSize, currentSpan, minSize, allowOverflow) {
+        if (allowOverflow) {
+            const additionalSpan = Math.ceil(remainingSize / (minSize + this.gap));
+            return currentSpan + additionalSpan;
+        }
+        return currentSpan;
+    }
+    calculateSizeFromEntries(entries, isRow = false) {
+        const start = isRow ? this.position.row.start : this.position.column.start;
+        const span = isRow ? this.position.row.span : this.position.column.span;
+        let accumulatedSize = 0;
+        for (let i = 0; i < span; i++) {
+            const gap = i > 0 ? this.gap : 0;
+            accumulatedSize += entries[start - 1 + i] + gap;
+        }
+        return accumulatedSize;
+    }
+    getGridOffset(grid, axis) {
+        const gridRect = grid.getBoundingClientRect();
+        const computed = getComputedStyle(grid);
+        return axis === 'horizontal'
+            ? gridRect.left +
+                window.scrollX +
+                grid.scrollLeft +
+                Number.parseFloat(computed.paddingLeft)
+            : gridRect.top + window.scrollY + Number.parseFloat(computed.paddingTop);
+    }
+}
+export function createTileResizeState() {
+    return new TileResizeState();
+}
+export function createTileDragGhost(tile) {
+    const clone = tile.cloneNode(true);
+    const computed = getComputedStyle(tile);
+    const { width, height } = tile.getBoundingClientRect();
+    clone.removeAttribute('id');
+    clone.setAttribute(DraggedTileAttribute, '');
+    clone.inert = true;
+    clone.position = -1;
+    Object.assign(clone.style, {
+        position: 'absolute',
+        contain: 'strict',
+        top: 0,
+        left: 0,
+        width: `${width}px`,
+        height: `${height}px`,
+        opacity: 0.6,
+        background: `${computed.getPropertyValue('--tile-background')}`,
+        border: `1px solid ${computed.getPropertyValue('--hover-border-color')}`,
+        borderRadius: computed.getPropertyValue('--border-radius'),
+        boxShadow: `${computed.getPropertyValue('--drag-elevation')}`,
+        zIndex: 1000,
+        viewTransitionName: 'dragged-tile-ghost',
+    });
+    return clone;
+}
+export function createTileGhost() {
+    const element = document.createElement('div');
+    Object.assign(element.style, {
+        position: 'absolute',
+        contain: 'strict',
+        top: 0,
+        left: 0,
+        zIndex: 1000,
+        background: 'var(--placeholder-background)',
+        border: '1px solid var(--ghost-border)',
+        borderRadius: 'var(--border-radius)',
+        width: '100%',
+        height: '100%',
+    });
+    return element;
+}
+//# 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":["import { asNumber, first } from '../common/util.js';\nimport type { ResizeState } from '../resize-container/types.js';\nimport type IgcTileComponent from './tile.js';\n\ntype TilePosition = {\n  start: number;\n  span: number;\n};\n\ntype TileGridPosition = {\n  column: TilePosition;\n  row: TilePosition;\n};\n\nexport const DraggedTileAttribute = 'data-drag-ghost-tile';\n\ntype TileGridDimension = { count: number; entries: number[]; minSize: number };\n\nconst CssValues = new RegExp(/(?<start>\\d+)?\\s*\\/?\\s*span\\s*(?<span>\\d+)?/gi);\n\nfunction parseTileGridRect(tile: IgcTileComponent): TileGridPosition {\n  const computed = getComputedStyle(tile);\n  const { gridColumn, gridRow } = computed;\n\n  const [column, row] = [\n    first(Array.from(gridColumn.matchAll(CssValues))).groups!,\n    first(Array.from(gridRow.matchAll(CssValues))).groups!,\n  ];\n\n  return {\n    column: {\n      start: asNumber(column.start, -1),\n      span: asNumber(column.span, -1),\n    },\n    row: { start: asNumber(row.start, -1), span: asNumber(row.span, -1) },\n  };\n}\n\nfunction parseTileParentGrid(gridContainer: HTMLElement) {\n  const computed = getComputedStyle(gridContainer);\n  const { gap, gridTemplateColumns, gridTemplateRows } = computed;\n\n  const columns = gridTemplateColumns.split(' ').map(asNumber);\n  const rows = gridTemplateRows.split(' ').map(asNumber);\n\n  return {\n    gap: asNumber(gap),\n    columns: {\n      count: columns.length,\n      entries: columns,\n      minSize: asNumber(computed.getPropertyValue('--ig-min-col-width')),\n    },\n    rows: {\n      count: rows.length,\n      entries: rows,\n      minSize: asNumber(computed.getPropertyValue('--ig-min-row-height')),\n    },\n  };\n}\n\nclass TileResizeState {\n  private _initialPosition!: TileGridPosition;\n\n  protected _gap = 0;\n  protected _prevDeltaX = 0;\n  protected _prevDeltaY = 0;\n\n  protected _prevSnappedWidth = 0;\n  protected _prevSnappedHeight = 0;\n\n  protected _position: TileGridPosition = {\n    column: { start: 0, span: 0 },\n    row: { start: 0, span: 0 },\n  };\n\n  protected _columns: TileGridDimension = {\n    count: 0,\n    entries: [],\n    minSize: 0,\n  };\n\n  protected _rows: TileGridDimension = {\n    count: 0,\n    entries: [],\n    minSize: 0,\n  };\n\n  public get gap(): number {\n    return this._gap;\n  }\n\n  public get position(): TileGridPosition {\n    return structuredClone(this._position);\n  }\n\n  public get columns(): TileGridDimension {\n    return structuredClone(this._columns);\n  }\n\n  public get rows(): TileGridDimension {\n    return structuredClone(this._rows);\n  }\n\n  public calculateSnappedWidth(state: ResizeState): number {\n    const result = this.calculateSnappedDimension(\n      state.current.width,\n      state.deltaX,\n      this._prevDeltaX,\n      this._columns.entries,\n      this._position.column.start,\n      this._prevSnappedWidth,\n      this._columns.minSize\n    );\n\n    this._prevDeltaX = result.newDelta;\n    this._prevSnappedWidth = result.snapped;\n    return result.snapped;\n  }\n\n  public calculateSnappedHeight(state: ResizeState): number {\n    const result = this.calculateSnappedDimension(\n      state.current.height,\n      state.deltaY,\n      this._prevDeltaY,\n      this._rows.entries,\n      this._position.row.start,\n      this._prevSnappedHeight,\n      this._rows.minSize\n    );\n\n    this._prevDeltaY = result.newDelta;\n    this._prevSnappedHeight = result.snapped;\n    return result.snapped;\n  }\n\n  public updateState(\n    tileRect: DOMRect,\n    tile: IgcTileComponent,\n    grid: HTMLElement\n  ): void {\n    this.initState(grid, tile);\n    this.calculateTileStartPosition(grid, tileRect);\n  }\n\n  /**\n   * Calculates and returns the CSS column and row properties of a tile after resizing,\n   * based on its new dimensions and starting position.\n   */\n  public getResizedPosition(rect: DOMRect) {\n    const { column, row } = this._initialPosition;\n\n    // REVIEW pass col minSize and allowOverflow?\n    this._position.column.span = this.calculateResizedSpan(\n      rect.width,\n      this._position.column,\n      this._columns.entries\n    );\n\n    this._position.row.span = this.calculateResizedSpan(\n      rect.height,\n      this._position.row,\n      this._rows.entries,\n      this._rows.minSize,\n      true\n    );\n\n    const cssColumn = `${column.start < 0 ? 'auto' : column.start} / span ${this._position.column.span}`;\n    const cssRow = `${row.start < 0 ? 'auto' : row.start} / span ${this._position.row.span}`;\n\n    return { column: cssColumn, row: cssRow };\n  }\n\n  public calculateResizedSize(grid: HTMLElement) {\n    const { columns, rows } = parseTileParentGrid(grid);\n\n    const width = this.calculateSizeFromEntries(columns.entries);\n    const height = this.calculateSizeFromEntries(rows.entries, true);\n\n    return { width, height };\n  }\n\n  /**\n   * Checks and adjusts tile spans based on the column count of the tile manager.\n   */\n  // REVIEW once we decide how to handle empty columns.\n  public adjustTileGridPosition(tiles: IgcTileComponent[]): void {\n    const columnCount = this.columns.count;\n\n    for (const tile of tiles) {\n      const colStart = tile.colStart || 0;\n      const colSpan = tile.colSpan || 0;\n\n      if (colStart > columnCount) {\n        //Prioritize span over start?\n        tile.colSpan = 1;\n        tile.colStart = columnCount;\n        continue;\n      }\n\n      if (colStart + colSpan - 1 > columnCount) {\n        tile.colSpan = columnCount - colStart + 1;\n      }\n    }\n  }\n\n  private calculateSnappedDimension(\n    currentSize: number,\n    currentDelta: number,\n    prevDelta: number,\n    gridEntries: number[],\n    startIndex: number,\n    prevSnapped: number,\n    minSize: number\n  ): { snapped: number; newDelta: number } {\n    const effectiveDelta = currentDelta - prevDelta;\n    let snapped = currentSize;\n\n    // If current size is below minimum, force to the size of the starting cell.\n    if (Math.trunc(currentSize) < minSize) {\n      return { snapped: gridEntries[startIndex], newDelta: currentDelta };\n    }\n\n    // If no change in delta and we have a snapped value, reuse it.\n    if (effectiveDelta === 0 && prevSnapped) {\n      return { snapped: prevSnapped, newDelta: currentDelta };\n    }\n\n    let accumulated = 0;\n    for (let i = startIndex - 1; i < gridEntries.length; i++) {\n      const currentEntry = gridEntries[i];\n      const nextEntry = gridEntries[i + 1] ?? currentEntry;\n      const prevEntry = i > 0 ? gridEntries[i - 1] : currentEntry;\n\n      // Thresholds for snapping to the next or previous tile boundary.\n      const halfwayExpand =\n        accumulated + currentEntry + this.gap + nextEntry / 2;\n      const halfwayShrink = accumulated + prevEntry / 2;\n      const entryEnd = accumulated + currentEntry + this.gap;\n\n      if (effectiveDelta > 0) {\n        // Expanding: snap when passing the halfway threshold.\n        if (\n          currentSize >= halfwayExpand &&\n          currentSize <= entryEnd + nextEntry\n        ) {\n          snapped = entryEnd + nextEntry;\n        }\n      } else if (effectiveDelta < 0) {\n        // Shrinking: snap when falling below the halfway threshold.\n        if (currentSize <= halfwayShrink && currentSize > accumulated) {\n          snapped = accumulated - this.gap;\n        }\n      }\n\n      accumulated += currentEntry + this.gap;\n    }\n\n    return { snapped, newDelta: currentDelta };\n  }\n\n  private calculateResizedSpan(\n    targetSize: number,\n    tilePosition: TilePosition,\n    sizes: number[],\n    minSize = 0,\n    allowOverflow = false\n  ): number {\n    let accumulatedSize = 0;\n    let newSpan = tilePosition.span;\n\n    const sizesAfterStart = sizes.slice(tilePosition.start - 1);\n    const availableSize =\n      sizesAfterStart.reduce((sum, s) => sum + s, 0) +\n      (sizes.length - 1) * this.gap;\n\n    if (targetSize <= sizes[0] + this.gap) {\n      return 1;\n    }\n\n    if (targetSize > availableSize) {\n      const remainingSize = targetSize - availableSize;\n      return this.calculateAdditionalSpan(\n        remainingSize,\n        sizesAfterStart.length,\n        minSize,\n        allowOverflow\n      );\n    }\n\n    for (let i = tilePosition.start - 1; i < sizes.length; i++) {\n      const currentSize = sizes[i];\n      const nextSize = sizes[i + 1] ?? currentSize;\n\n      const halfwayPoint =\n        accumulatedSize + currentSize + this.gap + nextSize / 2;\n\n      if (targetSize > halfwayPoint) {\n        newSpan = i + 3 - tilePosition.start;\n      } else {\n        break;\n      }\n\n      accumulatedSize += currentSize + this.gap;\n    }\n\n    return newSpan;\n  }\n\n  private initState(grid: HTMLElement, tile: IgcTileComponent): void {\n    const { gap, columns, rows } = parseTileParentGrid(grid);\n\n    this._initialPosition = parseTileGridRect(tile);\n    this._position = structuredClone(this._initialPosition);\n\n    this._gap = gap;\n    this._columns = columns;\n    this._rows = rows;\n    this._prevDeltaX = 0;\n    this._prevDeltaY = 0;\n    this._prevSnappedWidth = 0;\n    this._prevSnappedHeight = 0;\n  }\n\n  private calculateTileStartPosition(\n    grid: HTMLElement,\n    tileRect: DOMRect\n  ): void {\n    if (this._position.column.start < 0) {\n      const offsetX = this.getGridOffset(grid, 'horizontal');\n\n      this._position.column.start = this.calculatePosition(\n        tileRect.left + window.scrollX + grid.scrollLeft - offsetX,\n        this._columns.entries\n      );\n    }\n\n    if (this._position.row.start < 0) {\n      const offsetY = this.getGridOffset(grid, 'vertical');\n\n      this._position.row.start = this.calculatePosition(\n        tileRect.top + window.scrollY - offsetY,\n        this._rows.entries\n      );\n    }\n  }\n\n  private calculatePosition(targetPosition: number, sizes: number[]): number {\n    const gap = this.gap;\n    let accumulatedSize = 0;\n\n    for (const [i, size] of sizes.entries()) {\n      accumulatedSize += size + gap;\n\n      if (Math.trunc(targetPosition) < Math.trunc(accumulatedSize - gap)) {\n        return i + 1;\n      }\n    }\n\n    return 1;\n  }\n\n  private calculateAdditionalSpan(\n    remainingSize: number,\n    currentSpan: number,\n    minSize: number,\n    allowOverflow: boolean\n  ) {\n    if (allowOverflow) {\n      const additionalSpan = Math.ceil(remainingSize / (minSize + this.gap));\n      return currentSpan + additionalSpan;\n    }\n\n    return currentSpan;\n  }\n\n  private calculateSizeFromEntries(entries: number[], isRow = false) {\n    const start = isRow ? this.position.row.start : this.position.column.start;\n    const span = isRow ? this.position.row.span : this.position.column.span;\n\n    let accumulatedSize = 0;\n\n    for (let i = 0; i < span; i++) {\n      const gap = i > 0 ? this.gap : 0;\n      accumulatedSize += entries[start - 1 + i] + gap;\n    }\n\n    return accumulatedSize;\n  }\n\n  private getGridOffset(\n    grid: HTMLElement,\n    axis: 'horizontal' | 'vertical'\n  ): number {\n    const gridRect = grid.getBoundingClientRect();\n    const computed = getComputedStyle(grid);\n\n    return axis === 'horizontal'\n      ? gridRect.left +\n          window.scrollX +\n          grid.scrollLeft +\n          Number.parseFloat(computed.paddingLeft)\n      : gridRect.top + window.scrollY + Number.parseFloat(computed.paddingTop);\n  }\n}\n\nexport function createTileResizeState(): TileResizeState {\n  return new TileResizeState();\n}\n\nexport function createTileDragGhost(tile: IgcTileComponent): IgcTileComponent {\n  const clone = tile.cloneNode(true) as IgcTileComponent;\n  const computed = getComputedStyle(tile);\n\n  const { width, height } = tile.getBoundingClientRect();\n\n  clone.removeAttribute('id');\n  clone.setAttribute(DraggedTileAttribute, '');\n  clone.inert = true;\n  clone.position = -1;\n\n  Object.assign(clone.style, {\n    position: 'absolute',\n    contain: 'strict',\n    top: 0,\n    left: 0,\n    width: `${width}px`,\n    height: `${height}px`,\n    opacity: 0.6,\n    background: `${computed.getPropertyValue('--tile-background')}`,\n    border: `1px solid ${computed.getPropertyValue('--hover-border-color')}`,\n    borderRadius: computed.getPropertyValue('--border-radius'),\n    boxShadow: `${computed.getPropertyValue('--drag-elevation')}`,\n    zIndex: 1000,\n    viewTransitionName: 'dragged-tile-ghost',\n  });\n\n  return clone;\n}\n\nexport function createTileGhost(): HTMLElement {\n  const element = document.createElement('div');\n\n  Object.assign(element.style, {\n    position: 'absolute',\n    contain: 'strict',\n    top: 0,\n    left: 0,\n    zIndex: 1000,\n    background: 'var(--placeholder-background)',\n    border: '1px solid var(--ghost-border)',\n    borderRadius: 'var(--border-radius)',\n    width: '100%',\n    height: '100%',\n  });\n\n  return element;\n}\n"]}