igniteui-webcomponents 7.3.0 → 7.3.2

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

@@ -1 +1 @@
-{"version":3,"file":"resize-state.js","sourceRoot":"","sources":["../../../src/components/tile-manager/resize-state.ts"],"names":[],"mappings":"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","sourcesContent":["import { firstOf } from '#internals/utils/arrays.js';\nimport { asNumber } from '#internals/utils/math.js';\nimport type { ResizeState } from '../resize-container/types.js';\nimport { ResizeUtil } from './resize-util.js';\nimport type IgcTileComponent from './tile.js';\nimport type {\n  ResizeProps,\n  ResizeSpanProps,\n  TileGridDimension,\n  TileGridPosition,\n  TileResizeDimensions,\n} from './types.js';\n\nconst CssValues = /(?<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    firstOf(Array.from(gridColumn.matchAll(CssValues))).groups!,\n    firstOf(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('--min-col-width')),\n    },\n    rows: {\n      count: rows.length,\n      entries: rows,\n      minSize: asNumber(computed.getPropertyValue('--min-row-height')),\n    },\n  };\n}\n\nclass TileResizeState {\n  private _initialPosition!: TileGridPosition;\n  private _resizeUtil!: ResizeUtil;\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 resizedDimensions: TileResizeDimensions = {\n    width: null,\n    height: null,\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 resizeProps = this.getResizeProps(state);\n    const snappedDimension =\n      this._resizeUtil.calculateSnappedDimension(resizeProps);\n\n    this._prevDeltaX = snappedDimension.newDelta;\n    this._prevSnappedWidth = snappedDimension.snappedSize;\n    return snappedDimension.snappedSize;\n  }\n\n  public calculateSnappedHeight(state: ResizeState): number {\n    const resizeProps = this.getResizeProps(state, true);\n    const snappedDimension =\n      this._resizeUtil.calculateSnappedDimension(resizeProps);\n\n    this._prevDeltaY = snappedDimension.newDelta;\n    this._prevSnappedHeight = snappedDimension.snappedSize;\n    return snappedDimension.snappedSize;\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 calculateResizedGridPosition(rect: DOMRect) {\n    const colProps = this.getResizeSpanProps(rect);\n    const rowProps = this.getResizeSpanProps(rect, true);\n\n    // REVIEW pass col minSize and allowOverflow?\n    this._position.column.span =\n      this._resizeUtil.calculateResizedSpan(colProps);\n    this._position.row.span = this._resizeUtil.calculateResizedSpan(rowProps);\n\n    return {\n      colSpan: this._position.column.span,\n      rowSpan: this._position.row.span,\n    };\n  }\n\n  private initState(grid: HTMLElement, tile: IgcTileComponent): void {\n    const { gap, columns, rows } = parseTileParentGrid(grid);\n\n    this._resizeUtil = new ResizeUtil(gap);\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._resizeUtil.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._resizeUtil.calculatePosition(\n        tileRect.top + window.scrollY - offsetY,\n        this._rows.entries\n      );\n    }\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  private getResizeProps(state: ResizeState, isRow = false): ResizeProps {\n    return isRow\n      ? {\n          currentDelta: state.deltaY,\n          currentSize: state.current.height,\n          prevDelta: this._prevDeltaY,\n          gridEntries: this._rows.entries,\n          startIndex: this._position.row.start,\n          prevSnapped: this._prevSnappedHeight,\n        }\n      : {\n          currentDelta: state.deltaX,\n          currentSize: state.current.width,\n          prevDelta: this._prevDeltaX,\n          gridEntries: this._columns.entries,\n          startIndex: this._position.column.start,\n          prevSnapped: this._prevSnappedWidth,\n        };\n  }\n\n  private getResizeSpanProps(rect: DOMRect, isRow = false): ResizeSpanProps {\n    return isRow\n      ? {\n          targetSize: rect.height,\n          tilePosition: this.position.row,\n          tileGridDimension: this.rows,\n          gap: this.gap,\n          isRow,\n        }\n      : {\n          targetSize: rect.width,\n          tilePosition: this.position.column,\n          tileGridDimension: this.columns,\n          gap: this.gap,\n          isRow,\n        };\n  }\n}\n\nexport function createTileResizeState(): TileResizeState {\n  return new TileResizeState();\n}\n"]}
+{"version":3,"file":"resize-state.js","sourceRoot":"","sources":["../../../src/components/tile-manager/resize-state.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ResizeState } from '#internals/directives/resize.js';\nimport { firstOf } from '#internals/utils/arrays.js';\nimport { asNumber } from '#internals/utils/math.js';\nimport {\n  calculatePosition,\n  calculateResizedSpan,\n  calculateSnappedDimension,\n} from './resize-util.js';\nimport type IgcTileComponent from './tile.js';\nimport type { TileGridDimension, TileGridPosition } from './types.js';\n\nconst CssValues = /(?<start>\\d+)?\\s*\\/?\\s*span\\s*(?<span>\\d+)?/gi;\n\ntype ResizeAxis = 'column' | 'row';\n\ntype ResizeAxisState = {\n  dimension: TileGridDimension;\n  prevDelta: number;\n  prevSnapped: number;\n};\n\nfunction createAxisState(\n  dimension: TileGridDimension = { entries: [], minSize: 0 }\n): ResizeAxisState {\n  return { dimension, prevDelta: 0, prevSnapped: 0 };\n}\n\nfunction parseTileGridRect(tile: IgcTileComponent): TileGridPosition {\n  const computed = getComputedStyle(tile);\n  const { gridColumn, gridRow } = computed;\n\n  const [column, row] = [\n    firstOf(Array.from(gridColumn.matchAll(CssValues))).groups!,\n    firstOf(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  return {\n    gap: asNumber(gap),\n    columns: {\n      entries: gridTemplateColumns.split(' ').map(asNumber),\n      minSize: asNumber(computed.getPropertyValue('--min-col-width')),\n    },\n    rows: {\n      entries: gridTemplateRows.split(' ').map(asNumber),\n      minSize: asNumber(computed.getPropertyValue('--min-row-height')),\n    },\n  };\n}\n\nclass TileResizeState {\n  private _gap = 0;\n\n  private _position: TileGridPosition = {\n    column: { start: 0, span: 0 },\n    row: { start: 0, span: 0 },\n  };\n\n  private _axes: Record<ResizeAxis, ResizeAxisState> = {\n    column: createAxisState(),\n    row: createAxisState(),\n  };\n\n  public calculateSnappedWidth(state: ResizeState): number {\n    return this._calculateSnappedSize(\n      'column',\n      state.deltaX,\n      state.current.width\n    );\n  }\n\n  public calculateSnappedHeight(state: ResizeState): number {\n    return this._calculateSnappedSize(\n      'row',\n      state.deltaY,\n      state.current.height\n    );\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 calculateResizedGridPosition(rect: DOMRect) {\n    const { column, row } = this._position;\n\n    // REVIEW pass col minSize and allowOverflow?\n    column.span = calculateResizedSpan({\n      targetSize: rect.width,\n      tilePosition: column,\n      tileGridDimension: this._axes.column.dimension,\n      gap: this._gap,\n      isRow: false,\n    });\n\n    row.span = calculateResizedSpan({\n      targetSize: rect.height,\n      tilePosition: row,\n      tileGridDimension: this._axes.row.dimension,\n      gap: this._gap,\n      isRow: true,\n    });\n\n    return { colSpan: column.span, rowSpan: row.span };\n  }\n\n  private _calculateSnappedSize(\n    axis: ResizeAxis,\n    currentDelta: number,\n    currentSize: number\n  ): number {\n    const axisState = this._axes[axis];\n\n    const { snappedSize, newDelta } = calculateSnappedDimension({\n      currentDelta,\n      currentSize,\n      prevDelta: axisState.prevDelta,\n      prevSnapped: axisState.prevSnapped,\n      gridEntries: axisState.dimension.entries,\n      startIndex: this._position[axis].start,\n      gap: this._gap,\n    });\n\n    axisState.prevDelta = newDelta;\n    axisState.prevSnapped = snappedSize;\n    return snappedSize;\n  }\n\n  private _initState(grid: HTMLElement, tile: IgcTileComponent): void {\n    const { gap, columns, rows } = parseTileParentGrid(grid);\n\n    this._gap = gap;\n    this._position = parseTileGridRect(tile);\n    this._axes = {\n      column: createAxisState(columns),\n      row: createAxisState(rows),\n    };\n  }\n\n  /**\n   * Resolves the tile's implicit grid start lines from its offset inside the\n   * grid container when the tile has no explicit `colStart`/`rowStart`.\n   */\n  private _calculateTileStartPosition(\n    grid: HTMLElement,\n    tileRect: DOMRect\n  ): void {\n    const { column, row } = this._position;\n\n    if (column.start >= 0 && row.start >= 0) {\n      return;\n    }\n\n    const gridRect = grid.getBoundingClientRect();\n    const computed = getComputedStyle(grid);\n\n    if (column.start < 0) {\n      column.start = calculatePosition(\n        tileRect.left - gridRect.left - Number.parseFloat(computed.paddingLeft),\n        this._axes.column.dimension.entries,\n        this._gap\n      );\n    }\n\n    if (row.start < 0) {\n      row.start = calculatePosition(\n        tileRect.top - gridRect.top - Number.parseFloat(computed.paddingTop),\n        this._axes.row.dimension.entries,\n        this._gap\n      );\n    }\n  }\n}\n\nexport function createTileResizeState(): TileResizeState {\n  return new TileResizeState();\n}\n"]}

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

@@ -1,8 +1,4 @@
 import type { ResizeProps, ResizeSpanProps, SnappedDimension } from './types.js';
-export declare class ResizeUtil {
-    private gap;
-    constructor(gap: number);
-    calculateSnappedDimension(resizeProps: ResizeProps): SnappedDimension;
-    calculateResizedSpan(props: ResizeSpanProps): number;
-    calculatePosition(targetPosition: number, sizes: number[]): number;
-}
+export declare function calculateSnappedDimension(props: ResizeProps): SnappedDimension;
+export declare function calculateResizedSpan(props: ResizeSpanProps): number;
+export declare function calculatePosition(targetPosition: number, sizes: number[], gap: number): number;

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

@@ -1,84 +1,77 @@
-export class ResizeUtil {
-    constructor(gap) {
-        this.gap = gap;
+export function calculateSnappedDimension(props) {
+    const { currentDelta, prevDelta, currentSize, gridEntries, startIndex, prevSnapped, gap, } = props;
+    const effectiveDelta = currentDelta - prevDelta;
+    let snappedSize = currentSize;
+    if (Math.trunc(currentSize) < gridEntries[startIndex - 1]) {
+        return {
+            snappedSize: gridEntries[startIndex - 1],
+            newDelta: currentDelta,
+        };
     }
-    calculateSnappedDimension(resizeProps) {
-        const { currentDelta, prevDelta, currentSize, gridEntries, startIndex, prevSnapped, } = resizeProps;
-        const effectiveDelta = currentDelta - prevDelta;
-        let snappedSize = currentSize;
-        if (Math.trunc(currentSize) < gridEntries[startIndex - 1]) {
-            return {
-                snappedSize: gridEntries[startIndex - 1],
-                newDelta: currentDelta,
-            };
-        }
-        if (effectiveDelta === 0 && prevSnapped) {
-            return { snappedSize: 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) {
-                    snappedSize = entryEnd + nextEntry;
-                }
+    if (effectiveDelta === 0 && prevSnapped) {
+        return { snappedSize: 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 + gap + nextEntry / 2;
+        const halfwayShrink = accumulated + prevEntry / 2;
+        const entryEnd = accumulated + currentEntry + gap;
+        if (effectiveDelta > 0) {
+            if (currentSize >= halfwayExpand && currentSize <= entryEnd + nextEntry) {
+                snappedSize = entryEnd + nextEntry;
             }
-            else if (effectiveDelta < 0) {
-                if (currentSize <= halfwayShrink &&
-                    currentSize > accumulated - this.gap) {
-                    snappedSize = accumulated - this.gap;
-                }
+        }
+        else if (effectiveDelta < 0) {
+            if (currentSize <= halfwayShrink && currentSize > accumulated - gap) {
+                snappedSize = accumulated - gap;
             }
-            accumulated += currentEntry + this.gap;
         }
-        return { snappedSize, newDelta: currentDelta };
+        accumulated += currentEntry + gap;
     }
-    calculateResizedSpan(props) {
-        const { targetSize, tilePosition, tileGridDimension, gap, isRow } = props;
-        const { entries, minSize } = tileGridDimension;
-        let accumulatedSize = 0;
-        let newSpan = tilePosition.span;
-        const sizesAfterStart = entries.slice(tilePosition.start - 1);
-        const availableSize = sizesAfterStart.reduce((sum, s) => sum + s, 0) +
-            (sizesAfterStart.length - 1) * gap;
-        if (targetSize <= sizesAfterStart[0] + gap) {
-            return 1;
-        }
-        if (Math.trunc(targetSize) > Math.trunc(availableSize)) {
-            const remainingSize = targetSize - availableSize;
-            const additionalSpan = Math.ceil(remainingSize / (minSize + gap));
-            newSpan = sizesAfterStart.length + additionalSpan;
-            return isRow ? newSpan : Math.min(entries.length, newSpan);
+    return { snappedSize, newDelta: currentDelta };
+}
+export function calculateResizedSpan(props) {
+    const { targetSize, tilePosition, tileGridDimension, gap, isRow } = props;
+    const { entries, minSize } = tileGridDimension;
+    let accumulatedSize = 0;
+    let newSpan = tilePosition.span;
+    const sizesAfterStart = entries.slice(tilePosition.start - 1);
+    const availableSize = sizesAfterStart.reduce((sum, s) => sum + s, 0) +
+        (sizesAfterStart.length - 1) * gap;
+    if (targetSize <= sizesAfterStart[0] + gap) {
+        return 1;
+    }
+    if (Math.trunc(targetSize) > Math.trunc(availableSize)) {
+        const remainingSize = targetSize - availableSize;
+        const additionalSpan = Math.ceil(remainingSize / (minSize + gap));
+        newSpan = sizesAfterStart.length + additionalSpan;
+        return isRow ? newSpan : Math.min(entries.length, newSpan);
+    }
+    for (let i = tilePosition.start - 1; i < entries.length; i++) {
+        const currentSize = entries[i];
+        const nextSize = entries[i + 1] ?? currentSize;
+        const halfwayPoint = accumulatedSize + currentSize + gap + nextSize / 2;
+        if (targetSize > halfwayPoint) {
+            newSpan = i + 3 - tilePosition.start;
         }
-        for (let i = tilePosition.start - 1; i < entries.length; i++) {
-            const currentSize = entries[i];
-            const nextSize = entries[i + 1] ?? currentSize;
-            const halfwayPoint = accumulatedSize + currentSize + gap + nextSize / 2;
-            if (targetSize > halfwayPoint) {
-                newSpan = i + 3 - tilePosition.start;
-            }
-            else {
-                break;
-            }
-            accumulatedSize += currentSize + gap;
+        else {
+            break;
         }
-        return newSpan;
+        accumulatedSize += currentSize + gap;
     }
-    calculatePosition(targetPosition, sizes) {
-        let accumulatedSize = 0;
-        for (const [i, size] of sizes.entries()) {
-            accumulatedSize += size + this.gap;
-            if (Math.trunc(targetPosition) < Math.trunc(accumulatedSize - this.gap)) {
-                return i + 1;
-            }
+    return newSpan;
+}
+export function calculatePosition(targetPosition, sizes, 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;
     }
+    return 1;
 }
 //# sourceMappingURL=resize-util.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"resize-util.js","sourceRoot":"","sources":["../../../src/components/tile-manager/resize-util.ts"],"names":[],"mappings":"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","sourcesContent":["import type {\n  ResizeProps,\n  ResizeSpanProps,\n  SnappedDimension,\n} from './types.js';\n\nexport class ResizeUtil {\n  private gap: number;\n\n  constructor(gap: number) {\n    this.gap = gap;\n  }\n\n  public calculateSnappedDimension(resizeProps: ResizeProps): SnappedDimension {\n    const {\n      currentDelta,\n      prevDelta,\n      currentSize,\n      gridEntries,\n      startIndex,\n      prevSnapped,\n    } = resizeProps;\n\n    const effectiveDelta = currentDelta - prevDelta;\n    let snappedSize = currentSize;\n\n    // If current size is below minimum, force to the size of the starting cell.\n    if (Math.trunc(currentSize) < gridEntries[startIndex - 1]) {\n      return {\n        snappedSize: gridEntries[startIndex - 1],\n        newDelta: currentDelta,\n      };\n    }\n\n    // If no change in delta and we have a snapped value, reuse it.\n    if (effectiveDelta === 0 && prevSnapped) {\n      return { snappedSize: 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          snappedSize = entryEnd + nextEntry;\n        }\n      } else if (effectiveDelta < 0) {\n        // Shrinking: snap when falling below the halfway threshold.\n        if (\n          currentSize <= halfwayShrink &&\n          currentSize > accumulated - this.gap\n        ) {\n          snappedSize = accumulated - this.gap;\n        }\n      }\n\n      accumulated += currentEntry + this.gap;\n    }\n\n    return { snappedSize, newDelta: currentDelta };\n  }\n\n  public calculateResizedSpan(props: ResizeSpanProps): number {\n    const { targetSize, tilePosition, tileGridDimension, gap, isRow } = props;\n    const { entries, minSize } = tileGridDimension;\n\n    let accumulatedSize = 0;\n    let newSpan = tilePosition.span;\n\n    const sizesAfterStart = entries.slice(tilePosition.start - 1);\n    const availableSize =\n      sizesAfterStart.reduce((sum, s) => sum + s, 0) +\n      (sizesAfterStart.length - 1) * gap;\n\n    if (targetSize <= sizesAfterStart[0] + gap) {\n      return 1;\n    }\n\n    if (Math.trunc(targetSize) > Math.trunc(availableSize)) {\n      const remainingSize = targetSize - availableSize;\n\n      const additionalSpan = Math.ceil(remainingSize / (minSize + gap));\n      newSpan = sizesAfterStart.length + additionalSpan;\n      return isRow ? newSpan : Math.min(entries.length, newSpan);\n    }\n\n    for (let i = tilePosition.start - 1; i < entries.length; i++) {\n      const currentSize = entries[i];\n      const nextSize = entries[i + 1] ?? currentSize;\n\n      const halfwayPoint = accumulatedSize + currentSize + gap + nextSize / 2;\n\n      if (targetSize > halfwayPoint) {\n        newSpan = i + 3 - tilePosition.start;\n      } else {\n        break;\n      }\n\n      accumulatedSize += currentSize + gap;\n    }\n\n    return newSpan;\n  }\n\n  public calculatePosition(targetPosition: number, sizes: number[]): number {\n    let accumulatedSize = 0;\n\n    for (const [i, size] of sizes.entries()) {\n      accumulatedSize += size + this.gap;\n\n      if (Math.trunc(targetPosition) < Math.trunc(accumulatedSize - this.gap)) {\n        return i + 1;\n      }\n    }\n\n    return 1;\n  }\n}\n"]}
+{"version":3,"file":"resize-util.js","sourceRoot":"","sources":["../../../src/components/tile-manager/resize-util.ts"],"names":[],"mappings":"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","sourcesContent":["import type {\n  ResizeProps,\n  ResizeSpanProps,\n  SnappedDimension,\n} from './types.js';\n\nexport function calculateSnappedDimension(\n  props: ResizeProps\n): SnappedDimension {\n  const {\n    currentDelta,\n    prevDelta,\n    currentSize,\n    gridEntries,\n    startIndex,\n    prevSnapped,\n    gap,\n  } = props;\n\n  const effectiveDelta = currentDelta - prevDelta;\n  let snappedSize = currentSize;\n\n  // If current size is below minimum, force to the size of the starting cell.\n  if (Math.trunc(currentSize) < gridEntries[startIndex - 1]) {\n    return {\n      snappedSize: gridEntries[startIndex - 1],\n      newDelta: currentDelta,\n    };\n  }\n\n  // If no change in delta and we have a snapped value, reuse it.\n  if (effectiveDelta === 0 && prevSnapped) {\n    return { snappedSize: 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 = accumulated + currentEntry + gap + nextEntry / 2;\n    const halfwayShrink = accumulated + prevEntry / 2;\n    const entryEnd = accumulated + currentEntry + gap;\n\n    if (effectiveDelta > 0) {\n      // Expanding: snap when passing the halfway threshold.\n      if (currentSize >= halfwayExpand && currentSize <= entryEnd + nextEntry) {\n        snappedSize = entryEnd + nextEntry;\n      }\n    } else if (effectiveDelta < 0) {\n      // Shrinking: snap when falling below the halfway threshold.\n      if (currentSize <= halfwayShrink && currentSize > accumulated - gap) {\n        snappedSize = accumulated - gap;\n      }\n    }\n\n    accumulated += currentEntry + gap;\n  }\n\n  return { snappedSize, newDelta: currentDelta };\n}\n\nexport function calculateResizedSpan(props: ResizeSpanProps): number {\n  const { targetSize, tilePosition, tileGridDimension, gap, isRow } = props;\n  const { entries, minSize } = tileGridDimension;\n\n  let accumulatedSize = 0;\n  let newSpan = tilePosition.span;\n\n  const sizesAfterStart = entries.slice(tilePosition.start - 1);\n  const availableSize =\n    sizesAfterStart.reduce((sum, s) => sum + s, 0) +\n    (sizesAfterStart.length - 1) * gap;\n\n  if (targetSize <= sizesAfterStart[0] + gap) {\n    return 1;\n  }\n\n  if (Math.trunc(targetSize) > Math.trunc(availableSize)) {\n    const remainingSize = targetSize - availableSize;\n\n    const additionalSpan = Math.ceil(remainingSize / (minSize + gap));\n    newSpan = sizesAfterStart.length + additionalSpan;\n    return isRow ? newSpan : Math.min(entries.length, newSpan);\n  }\n\n  for (let i = tilePosition.start - 1; i < entries.length; i++) {\n    const currentSize = entries[i];\n    const nextSize = entries[i + 1] ?? currentSize;\n\n    const halfwayPoint = accumulatedSize + currentSize + gap + nextSize / 2;\n\n    if (targetSize > halfwayPoint) {\n      newSpan = i + 3 - tilePosition.start;\n    } else {\n      break;\n    }\n\n    accumulatedSize += currentSize + gap;\n  }\n\n  return newSpan;\n}\n\nexport function calculatePosition(\n  targetPosition: number,\n  sizes: number[],\n  gap: number\n): number {\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"]}

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

@@ -12,7 +12,7 @@ export interface SerializedTile {
     id: string | null;
 }
 declare class TileManagerSerializer {
-    tileManager: IgcTileManagerComponent;
+    private readonly _tileManager;
     constructor(tileManager: IgcTileManagerComponent);
     save(): SerializedTile[];
     saveAsJSON(): string;

package/components/tile-manager/serializer.js

@@ -1,9 +1,9 @@
 class TileManagerSerializer {
     constructor(tileManager) {
-        this.tileManager = tileManager;
+        this._tileManager = tileManager;
     }
     save() {
-        return this.tileManager.tiles.map((tile) => {
+        return this._tileManager.tiles.map((tile) => {
             return {
                 colSpan: tile.colSpan,
                 colStart: tile.colStart,
@@ -23,18 +23,17 @@ class TileManagerSerializer {
     }
     load(tiles) {
         const mapped = new Map(tiles.map((tile) => [tile.id, tile]));
-        for (const tile of this.tileManager.tiles) {
-            if (!mapped.has(tile.id)) {
-                continue;
-            }
+        for (const tile of this._tileManager.tiles) {
             const serialized = mapped.get(tile.id);
-            Object.assign(tile, serialized);
+            if (serialized) {
+                Object.assign(tile, serialized);
+            }
         }
     }
     loadFromJSON(data) {
-        if (!data)
-            return;
-        this.load(JSON.parse(data));
+        if (data) {
+            this.load(JSON.parse(data));
+        }
     }
 }
 export function createSerializer(host) {

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

@@ -1 +1 @@
-{"version":3,"file":"serializer.js","sourceRoot":"","sources":["../../../src/components/tile-manager/serializer.ts"],"names":[],"mappings":"AAeA,MAAM,qBAAqB;IAGzB,YAAY,WAAoC;QAC9C,IAAI,CAAC,WAAW,GAAG,WAAW,CAAC;IACjC,CAAC;IAEM,IAAI;QACT,OAAO,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YACzC,OAAO;gBACL,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,iBAAiB,EAAE,IAAI,CAAC,iBAAiB;gBACzC,eAAe,EAAE,IAAI,CAAC,eAAe;gBACrC,aAAa,EAAE,IAAI,CAAC,aAAa;gBACjC,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,EAAE,EAAE,IAAI,CAAC,EAAE;aACZ,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC;IAEM,UAAU;QACf,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;IACrC,CAAC;IAEM,IAAI,CAAC,KAAuB;QACjC,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;QAE7D,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,CAAC;YAC1C,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC;gBACzB,SAAS;YACX,CAAC;YAED,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAE,CAAC;YAExC,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;QAClC,CAAC;IACH,CAAC;IAEM,YAAY,CAAC,IAAY;QAC9B,IAAI,CAAC,IAAI;YAAE,OAAO;QAElB,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;IAC9B,CAAC;CACF;AAED,MAAM,UAAU,gBAAgB,CAAC,IAA6B;IAC5D,OAAO,IAAI,qBAAqB,CAAC,IAAI,CAAC,CAAC;AACzC,CAAC","sourcesContent":["import type IgcTileManagerComponent from './tile-manager.js';\n\nexport interface SerializedTile {\n  colSpan: number;\n  colStart: number | null;\n  disableFullscreen: boolean;\n  disableMaximize: boolean;\n  disableResize: boolean;\n  maximized: boolean;\n  position: number;\n  rowSpan: number;\n  rowStart: number | null;\n  id: string | null;\n}\n\nclass TileManagerSerializer {\n  public tileManager: IgcTileManagerComponent;\n\n  constructor(tileManager: IgcTileManagerComponent) {\n    this.tileManager = tileManager;\n  }\n\n  public save(): SerializedTile[] {\n    return this.tileManager.tiles.map((tile) => {\n      return {\n        colSpan: tile.colSpan,\n        colStart: tile.colStart,\n        disableFullscreen: tile.disableFullscreen,\n        disableMaximize: tile.disableMaximize,\n        disableResize: tile.disableResize,\n        maximized: tile.maximized,\n        position: tile.position,\n        rowSpan: tile.rowSpan,\n        rowStart: tile.rowStart,\n        id: tile.id,\n      };\n    });\n  }\n\n  public saveAsJSON(): string {\n    return JSON.stringify(this.save());\n  }\n\n  public load(tiles: SerializedTile[]): void {\n    const mapped = new Map(tiles.map((tile) => [tile.id, tile]));\n\n    for (const tile of this.tileManager.tiles) {\n      if (!mapped.has(tile.id)) {\n        continue;\n      }\n\n      const serialized = mapped.get(tile.id)!;\n\n      Object.assign(tile, serialized);\n    }\n  }\n\n  public loadFromJSON(data: string): void {\n    if (!data) return;\n\n    this.load(JSON.parse(data));\n  }\n}\n\nexport function createSerializer(host: IgcTileManagerComponent) {\n  return new TileManagerSerializer(host);\n}\n"]}
+{"version":3,"file":"serializer.js","sourceRoot":"","sources":["../../../src/components/tile-manager/serializer.ts"],"names":[],"mappings":"AAeA,MAAM,qBAAqB;IAGzB,YAAY,WAAoC;QAC9C,IAAI,CAAC,YAAY,GAAG,WAAW,CAAC;IAClC,CAAC;IAEM,IAAI;QACT,OAAO,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;YAC1C,OAAO;gBACL,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,iBAAiB,EAAE,IAAI,CAAC,iBAAiB;gBACzC,eAAe,EAAE,IAAI,CAAC,eAAe;gBACrC,aAAa,EAAE,IAAI,CAAC,aAAa;gBACjC,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,EAAE,EAAE,IAAI,CAAC,EAAE;aACZ,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC;IAEM,UAAU;QACf,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;IACrC,CAAC;IAEM,IAAI,CAAC,KAAuB;QACjC,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;QAE7D,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;YAC3C,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YAEvC,IAAI,UAAU,EAAE,CAAC;gBACf,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;YAClC,CAAC;QACH,CAAC;IACH,CAAC;IAEM,YAAY,CAAC,IAAY;QAC9B,IAAI,IAAI,EAAE,CAAC;YACT,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC;CACF;AAED,MAAM,UAAU,gBAAgB,CAAC,IAA6B;IAC5D,OAAO,IAAI,qBAAqB,CAAC,IAAI,CAAC,CAAC;AACzC,CAAC","sourcesContent":["import type IgcTileManagerComponent from './tile-manager.js';\n\nexport interface SerializedTile {\n  colSpan: number;\n  colStart: number | null;\n  disableFullscreen: boolean;\n  disableMaximize: boolean;\n  disableResize: boolean;\n  maximized: boolean;\n  position: number;\n  rowSpan: number;\n  rowStart: number | null;\n  id: string | null;\n}\n\nclass TileManagerSerializer {\n  private readonly _tileManager: IgcTileManagerComponent;\n\n  constructor(tileManager: IgcTileManagerComponent) {\n    this._tileManager = tileManager;\n  }\n\n  public save(): SerializedTile[] {\n    return this._tileManager.tiles.map((tile) => {\n      return {\n        colSpan: tile.colSpan,\n        colStart: tile.colStart,\n        disableFullscreen: tile.disableFullscreen,\n        disableMaximize: tile.disableMaximize,\n        disableResize: tile.disableResize,\n        maximized: tile.maximized,\n        position: tile.position,\n        rowSpan: tile.rowSpan,\n        rowStart: tile.rowStart,\n        id: tile.id,\n      };\n    });\n  }\n\n  public saveAsJSON(): string {\n    return JSON.stringify(this.save());\n  }\n\n  public load(tiles: SerializedTile[]): void {\n    const mapped = new Map(tiles.map((tile) => [tile.id, tile]));\n\n    for (const tile of this._tileManager.tiles) {\n      const serialized = mapped.get(tile.id);\n\n      if (serialized) {\n        Object.assign(tile, serialized);\n      }\n    }\n  }\n\n  public loadFromJSON(data: string): void {\n    if (data) {\n      this.load(JSON.parse(data));\n    }\n  }\n}\n\nexport function createSerializer(host: IgcTileManagerComponent) {\n  return new TileManagerSerializer(host);\n}\n"]}

package/components/tile-manager/themes/shared/tile/tile.common.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `[part~=drag-over]::after,[part~=base]::after{content:"";position:absolute;pointer-events:none;inset:0;width:100%;height:100%;border-radius:inherit}:host{--component-size: var(--ig-size, var(--default-size));--_border-radius: var(--border-radius)}[part~=base]{background:var(--tile-background);border-radius:var(--_border-radius);box-shadow:var(--resting-elevation)}[part~=base]::after{border:.0625rem solid var(--border-color)}[part~=base]:not([part~=resizable]):hover::after{border:.0625rem solid var(--hover-border-color)}:host([part=resizing]),:host([part=dragging]){border-radius:var(--border-radius)}:host([part=dragging]){background:var(--placeholder-background);border:.0625rem solid var(--ghost-border)}[part~=base][part~=resizing]{opacity:.3}[part=content-container]{background:var(--content-background);color:var(--content-color)}[part=ghost]{border-radius:var(--border-radius);border:.0625rem solid var(--ghost-border);background:var(--overlay-background)}[part~=drag-over]::after{z-index:1000;border:.0625rem solid var(--ghost-border);background:var(--overlay-background)}[part=header]{background:var(--header-background);border-top-left-radius:var(--_border-radius);border-top-right-radius:var(--_border-radius)}[part=title]{color:var(--title-color)}igc-divider{--color: var(--divider-color)}igc-resize{--resize-indicator: var(--ghost-border)}igc-resize[part~=side-adorner]::part(trigger-side){background-color:rgba(0,0,0,0);right:0}igc-resize[part~=corner-adorner]::part(trigger){background-color:rgba(0,0,0,0);right:0;bottom:0}igc-resize[part~=bottom-adorner]::part(trigger-bottom){background-color:rgba(0,0,0,0);bottom:0}`;
+export const styles = css `[part~=active]::after,[part~=drag-over]::after,[part~=base]::after{content:"";position:absolute;pointer-events:none;inset:0;width:100%;height:100%;border-radius:inherit}:host{--component-size: var(--ig-size, var(--default-size));--_border-radius: var(--border-radius)}[part~=base]{background:var(--tile-background);border-radius:var(--_border-radius);box-shadow:var(--resting-elevation)}[part~=base]::after{border:.0625rem solid var(--border-color)}[part~=base]:not([part~=resizable]):hover::after{border:.0625rem solid var(--hover-border-color)}:host([part=resizing]),:host([part=dragging]){border-radius:var(--border-radius)}:host([part=dragging]){background:var(--placeholder-background);border:.0625rem solid var(--ghost-border)}[part~=base][part~=resizing]{opacity:.3}[part=content-container]{background:var(--content-background);color:var(--content-color)}[part=ghost]{border-radius:var(--border-radius);border:.0625rem solid var(--ghost-border);background:var(--overlay-background)}[part~=drag-over]::after{z-index:1000;border:.0625rem solid var(--ghost-border);background:var(--overlay-background)}[part=header]{background:var(--header-background);border-top-left-radius:var(--_border-radius);border-top-right-radius:var(--_border-radius)}[part=title]{color:var(--title-color)}igc-divider{--color: var(--divider-color)}[part~=active]::after{border-radius:var(--_border-radius);border:.0625rem solid var(--ghost-border)}[part~=trigger-side],[part~=trigger],[part~=trigger-bottom]{width:var(--_size);aspect-ratio:1;border-radius:50%;z-index:11111;background-color:var(--ghost-border)}[part~=custom]{background-color:rgba(0,0,0,0)}[part~=trigger-side][part~=custom],[part~=trigger][part~=custom]{right:0}[part~=trigger][part~=custom],[part~=trigger-bottom][part~=custom]{bottom:0}`;
 //# sourceMappingURL=tile.common.css.js.map

package/components/tile-manager/themes/shared/tile/tile.common.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"tile.common.css.js","sourceRoot":"","sources":["../../../../../../src/components/tile-manager/themes/shared/tile/tile.common.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,umDAAumD,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`[part~=drag-over]::after,[part~=base]::after{content:\"\";position:absolute;pointer-events:none;inset:0;width:100%;height:100%;border-radius:inherit}:host{--component-size: var(--ig-size, var(--default-size));--_border-radius: var(--border-radius)}[part~=base]{background:var(--tile-background);border-radius:var(--_border-radius);box-shadow:var(--resting-elevation)}[part~=base]::after{border:.0625rem solid var(--border-color)}[part~=base]:not([part~=resizable]):hover::after{border:.0625rem solid var(--hover-border-color)}:host([part=resizing]),:host([part=dragging]){border-radius:var(--border-radius)}:host([part=dragging]){background:var(--placeholder-background);border:.0625rem solid var(--ghost-border)}[part~=base][part~=resizing]{opacity:.3}[part=content-container]{background:var(--content-background);color:var(--content-color)}[part=ghost]{border-radius:var(--border-radius);border:.0625rem solid var(--ghost-border);background:var(--overlay-background)}[part~=drag-over]::after{z-index:1000;border:.0625rem solid var(--ghost-border);background:var(--overlay-background)}[part=header]{background:var(--header-background);border-top-left-radius:var(--_border-radius);border-top-right-radius:var(--_border-radius)}[part=title]{color:var(--title-color)}igc-divider{--color: var(--divider-color)}igc-resize{--resize-indicator: var(--ghost-border)}igc-resize[part~=side-adorner]::part(trigger-side){background-color:rgba(0,0,0,0);right:0}igc-resize[part~=corner-adorner]::part(trigger){background-color:rgba(0,0,0,0);right:0;bottom:0}igc-resize[part~=bottom-adorner]::part(trigger-bottom){background-color:rgba(0,0,0,0);bottom:0}`;\n  "]}
+{"version":3,"file":"tile.common.css.js","sourceRoot":"","sources":["../../../../../../src/components/tile-manager/themes/shared/tile/tile.common.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,2vDAA2vD,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`[part~=active]::after,[part~=drag-over]::after,[part~=base]::after{content:\"\";position:absolute;pointer-events:none;inset:0;width:100%;height:100%;border-radius:inherit}:host{--component-size: var(--ig-size, var(--default-size));--_border-radius: var(--border-radius)}[part~=base]{background:var(--tile-background);border-radius:var(--_border-radius);box-shadow:var(--resting-elevation)}[part~=base]::after{border:.0625rem solid var(--border-color)}[part~=base]:not([part~=resizable]):hover::after{border:.0625rem solid var(--hover-border-color)}:host([part=resizing]),:host([part=dragging]){border-radius:var(--border-radius)}:host([part=dragging]){background:var(--placeholder-background);border:.0625rem solid var(--ghost-border)}[part~=base][part~=resizing]{opacity:.3}[part=content-container]{background:var(--content-background);color:var(--content-color)}[part=ghost]{border-radius:var(--border-radius);border:.0625rem solid var(--ghost-border);background:var(--overlay-background)}[part~=drag-over]::after{z-index:1000;border:.0625rem solid var(--ghost-border);background:var(--overlay-background)}[part=header]{background:var(--header-background);border-top-left-radius:var(--_border-radius);border-top-right-radius:var(--_border-radius)}[part=title]{color:var(--title-color)}igc-divider{--color: var(--divider-color)}[part~=active]::after{border-radius:var(--_border-radius);border:.0625rem solid var(--ghost-border)}[part~=trigger-side],[part~=trigger],[part~=trigger-bottom]{width:var(--_size);aspect-ratio:1;border-radius:50%;z-index:11111;background-color:var(--ghost-border)}[part~=custom]{background-color:rgba(0,0,0,0)}[part~=trigger-side][part~=custom],[part~=trigger][part~=custom]{right:0}[part~=trigger][part~=custom],[part~=trigger-bottom][part~=custom]{bottom:0}`;\n  "]}

package/components/tile-manager/themes/tile.base.css.js

@@ -1,3 +1,3 @@
 import { css } from 'lit';
-export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{--pad-block: max(var(--is-large, 1) * max(0.8125rem, -1 * 0.8125rem), var(--is-medium, 1) * max(0.8125rem, -1 * 0.8125rem), var(--is-small, 1) * max(0.5rem, -1 * 0.5rem));--pad-inline: max(var(--is-large, 1) * max(1.25rem, -1 * 1.25rem), var(--is-medium, 1) * max(1rem, -1 * 1rem), var(--is-small, 1) * max(0.75rem, -1 * 0.75rem));display:block;position:relative;grid-column:var(--ig-col-start, auto)/span var(--ig-col-span, 1);grid-row:var(--ig-row-start, auto)/span var(--ig-row-span, 1)}:host([part=resizing]) igc-resize,:host([part=dragging]) igc-resize{--resize-visibility: hidden}:host([part=resizing]) igc-resize::part(active)::after,:host([part=dragging]) igc-resize::part(active)::after{border:none}[part~=tile-container]{width:100%;height:100%}[part~=base]{width:100%;height:100%;overflow:hidden}[part=content-container]{display:block;border-radius:inherit}[part=content-container] ::slotted(*){font-family:var(--ig-body-1-font-family, var(--ig-font-family));font-size:var(--ig-body-1-font-size);font-weight:var(--ig-body-1-font-weight);font-style:var(--ig-body-1-font-style);line-height:var(--ig-body-1-line-height);letter-spacing:var(--ig-body-1-letter-spacing);text-transform:var(--ig-body-1-text-transform);margin-top:var(--ig-body-1-margin-top);margin-bottom:var(--ig-body-1-margin-bottom);margin:0}:host([maximized]){position:absolute;inset:0;width:100%;height:100%;z-index:10;grid-column:unset;grid-row:unset}:host([maximized]) [part~=base]{width:100%;height:100%}[part=ghost]{position:absolute;top:0;left:0;width:100%;height:100%;transform:scale(0);z-index:10}[part=header]{display:flex;align-items:center;gap:max(var(--is-large, 1)*max(1rem, -1 * 1rem),var(--is-medium, 1)*max(1rem, -1 * 1rem),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem));width:100%;padding-block:var(--pad-block);padding-inline:var(--pad-inline)}:host([disable-fullscreen][disable-maximize]) igc-divider{display:none}[part=title]{display:flex;flex-direction:column;justify-content:center;flex:1 0 0%;overflow:hidden;min-width:2ch}::slotted([slot=title]){font-family:var(--ig-h6-font-family, var(--ig-font-family));font-size:var(--ig-h6-font-size);font-weight:var(--ig-h6-font-weight);font-style:var(--ig-h6-font-style);line-height:var(--ig-h6-line-height);letter-spacing:var(--ig-h6-letter-spacing);text-transform:var(--ig-h6-text-transform);margin-top:var(--ig-h6-margin-top);margin-bottom:var(--ig-h6-margin-bottom);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:100%;min-width:2ch;margin-bottom:0;display:block}[part=actions]{display:flex;gap:.5rem;margin-inline-start:auto;flex-shrink:0}`;
+export const styles = css `:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{--pad-block: max(var(--is-large, 1) * max(0.8125rem, -1 * 0.8125rem), var(--is-medium, 1) * max(0.8125rem, -1 * 0.8125rem), var(--is-small, 1) * max(0.5rem, -1 * 0.5rem));--pad-inline: max(var(--is-large, 1) * max(1.25rem, -1 * 1.25rem), var(--is-medium, 1) * max(1rem, -1 * 1rem), var(--is-small, 1) * max(0.75rem, -1 * 0.75rem));display:block;position:relative;grid-column:var(--ig-col-start, auto)/span var(--ig-col-span, 1);grid-row:var(--ig-row-start, auto)/span var(--ig-row-span, 1)}:host([part=resizing]) [part~=trigger-side],:host([part=resizing]) [part~=trigger],:host([part=resizing]) [part~=trigger-bottom],:host([part=dragging]) [part~=trigger-side],:host([part=dragging]) [part~=trigger],:host([part=dragging]) [part~=trigger-bottom]{visibility:hidden}:host([part=resizing]) [part~=active]::after,:host([part=dragging]) [part~=active]::after{border:none}[part~=tile-container]{position:relative;width:100%;height:100%}[part~=trigger-side],[part~=trigger],[part~=trigger-bottom]{--_size: 0.6875rem;display:inline-flex;position:absolute;z-index:1}[part~=trigger-side]{top:calc(50% - var(--_size));right:calc(var(--_size)/2*-1);cursor:e-resize}[part~=trigger]{bottom:calc(var(--_size)/2*-1);right:calc(var(--_size)/2*-1);cursor:se-resize}[part~=trigger-bottom]{left:calc(50% - var(--_size));bottom:calc(var(--_size)/2*-1);cursor:s-resize}[part~=trigger]:focus{outline:none}[part~=base]{width:100%;height:100%;overflow:hidden}[part=content-container]{display:block;border-radius:inherit}[part=content-container] ::slotted(*){font-family:var(--ig-body-1-font-family, var(--ig-font-family));font-size:var(--ig-body-1-font-size);font-weight:var(--ig-body-1-font-weight);font-style:var(--ig-body-1-font-style);line-height:var(--ig-body-1-line-height);letter-spacing:var(--ig-body-1-letter-spacing);text-transform:var(--ig-body-1-text-transform);margin-top:var(--ig-body-1-margin-top);margin-bottom:var(--ig-body-1-margin-bottom);margin:0}:host([maximized]){position:absolute;inset:0;width:100%;height:100%;z-index:10;grid-column:unset;grid-row:unset}:host([maximized]) [part~=base]{width:100%;height:100%}[part=ghost]{position:absolute;top:0;left:0;width:100%;height:100%;transform:scale(0);z-index:10}[part=header]{display:flex;align-items:center;gap:max(var(--is-large, 1)*max(1rem, -1 * 1rem),var(--is-medium, 1)*max(1rem, -1 * 1rem),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem));width:100%;padding-block:var(--pad-block);padding-inline:var(--pad-inline)}:host([disable-fullscreen][disable-maximize]) igc-divider{display:none}[part=title]{display:flex;flex-direction:column;justify-content:center;flex:1 0 0%;overflow:hidden;min-width:2ch}::slotted([slot=title]){font-family:var(--ig-h6-font-family, var(--ig-font-family));font-size:var(--ig-h6-font-size);font-weight:var(--ig-h6-font-weight);font-style:var(--ig-h6-font-style);line-height:var(--ig-h6-line-height);letter-spacing:var(--ig-h6-letter-spacing);text-transform:var(--ig-h6-text-transform);margin-top:var(--ig-h6-margin-top);margin-bottom:var(--ig-h6-margin-bottom);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:100%;min-width:2ch;margin-bottom:0;display:block}[part=actions]{display:flex;gap:.5rem;margin-inline-start:auto;flex-shrink:0}@media(forced-colors: active){[part~=trigger],[part~=trigger-side],[part~=trigger-bottom]{border:.0625rem solid CanvasText}[part~=trigger]:hover,[part~=trigger-side]:hover,[part~=trigger-bottom]:hover{border-color:Highlight}[part~=base]:not([part~=resizable]):hover::after{--hover-border-color: Highlight}}`;
 //# sourceMappingURL=tile.base.css.js.map

package/components/tile-manager/themes/tile.base.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"tile.base.css.js","sourceRoot":"","sources":["../../../../src/components/tile-manager/themes/tile.base.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,q/GAAq/G,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{--pad-block: max(var(--is-large, 1) * max(0.8125rem, -1 * 0.8125rem), var(--is-medium, 1) * max(0.8125rem, -1 * 0.8125rem), var(--is-small, 1) * max(0.5rem, -1 * 0.5rem));--pad-inline: max(var(--is-large, 1) * max(1.25rem, -1 * 1.25rem), var(--is-medium, 1) * max(1rem, -1 * 1rem), var(--is-small, 1) * max(0.75rem, -1 * 0.75rem));display:block;position:relative;grid-column:var(--ig-col-start, auto)/span var(--ig-col-span, 1);grid-row:var(--ig-row-start, auto)/span var(--ig-row-span, 1)}:host([part=resizing]) igc-resize,:host([part=dragging]) igc-resize{--resize-visibility: hidden}:host([part=resizing]) igc-resize::part(active)::after,:host([part=dragging]) igc-resize::part(active)::after{border:none}[part~=tile-container]{width:100%;height:100%}[part~=base]{width:100%;height:100%;overflow:hidden}[part=content-container]{display:block;border-radius:inherit}[part=content-container] ::slotted(*){font-family:var(--ig-body-1-font-family, var(--ig-font-family));font-size:var(--ig-body-1-font-size);font-weight:var(--ig-body-1-font-weight);font-style:var(--ig-body-1-font-style);line-height:var(--ig-body-1-line-height);letter-spacing:var(--ig-body-1-letter-spacing);text-transform:var(--ig-body-1-text-transform);margin-top:var(--ig-body-1-margin-top);margin-bottom:var(--ig-body-1-margin-bottom);margin:0}:host([maximized]){position:absolute;inset:0;width:100%;height:100%;z-index:10;grid-column:unset;grid-row:unset}:host([maximized]) [part~=base]{width:100%;height:100%}[part=ghost]{position:absolute;top:0;left:0;width:100%;height:100%;transform:scale(0);z-index:10}[part=header]{display:flex;align-items:center;gap:max(var(--is-large, 1)*max(1rem, -1 * 1rem),var(--is-medium, 1)*max(1rem, -1 * 1rem),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem));width:100%;padding-block:var(--pad-block);padding-inline:var(--pad-inline)}:host([disable-fullscreen][disable-maximize]) igc-divider{display:none}[part=title]{display:flex;flex-direction:column;justify-content:center;flex:1 0 0%;overflow:hidden;min-width:2ch}::slotted([slot=title]){font-family:var(--ig-h6-font-family, var(--ig-font-family));font-size:var(--ig-h6-font-size);font-weight:var(--ig-h6-font-weight);font-style:var(--ig-h6-font-style);line-height:var(--ig-h6-line-height);letter-spacing:var(--ig-h6-letter-spacing);text-transform:var(--ig-h6-text-transform);margin-top:var(--ig-h6-margin-top);margin-bottom:var(--ig-h6-margin-bottom);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:100%;min-width:2ch;margin-bottom:0;display:block}[part=actions]{display:flex;gap:.5rem;margin-inline-start:auto;flex-shrink:0}`;\n  "]}
+{"version":3,"file":"tile.base.css.js","sourceRoot":"","sources":["../../../../src/components/tile-manager/themes/tile.base.css.ts"],"names":[],"mappings":"AACE,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA,65IAA65I,CAAC","sourcesContent":["\n  import { css } from 'lit';\n  export const styles = css`:host{--is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);--is-medium: min( clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1), clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1) );--is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);position:relative;box-sizing:border-box;scrollbar-width:var(--ig-scrollbar-size, var(--sb-size));scrollbar-color:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color)) var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar{width:var(--ig-scrollbar-size, var(--sb-size));height:var(--ig-scrollbar-size, var(--sb-size));background:var(--ig-scrollbar-track-background, var(--sb-track-bg-color))}:host ::-webkit-scrollbar-thumb{background:var(--ig-scrollbar-thumb-background, var(--sb-thumb-bg-color))}:host *,:host *::before,:host *::after{box-sizing:border-box}:host([hidden]),[hidden]{display:none !important}:host{--pad-block: max(var(--is-large, 1) * max(0.8125rem, -1 * 0.8125rem), var(--is-medium, 1) * max(0.8125rem, -1 * 0.8125rem), var(--is-small, 1) * max(0.5rem, -1 * 0.5rem));--pad-inline: max(var(--is-large, 1) * max(1.25rem, -1 * 1.25rem), var(--is-medium, 1) * max(1rem, -1 * 1rem), var(--is-small, 1) * max(0.75rem, -1 * 0.75rem));display:block;position:relative;grid-column:var(--ig-col-start, auto)/span var(--ig-col-span, 1);grid-row:var(--ig-row-start, auto)/span var(--ig-row-span, 1)}:host([part=resizing]) [part~=trigger-side],:host([part=resizing]) [part~=trigger],:host([part=resizing]) [part~=trigger-bottom],:host([part=dragging]) [part~=trigger-side],:host([part=dragging]) [part~=trigger],:host([part=dragging]) [part~=trigger-bottom]{visibility:hidden}:host([part=resizing]) [part~=active]::after,:host([part=dragging]) [part~=active]::after{border:none}[part~=tile-container]{position:relative;width:100%;height:100%}[part~=trigger-side],[part~=trigger],[part~=trigger-bottom]{--_size: 0.6875rem;display:inline-flex;position:absolute;z-index:1}[part~=trigger-side]{top:calc(50% - var(--_size));right:calc(var(--_size)/2*-1);cursor:e-resize}[part~=trigger]{bottom:calc(var(--_size)/2*-1);right:calc(var(--_size)/2*-1);cursor:se-resize}[part~=trigger-bottom]{left:calc(50% - var(--_size));bottom:calc(var(--_size)/2*-1);cursor:s-resize}[part~=trigger]:focus{outline:none}[part~=base]{width:100%;height:100%;overflow:hidden}[part=content-container]{display:block;border-radius:inherit}[part=content-container] ::slotted(*){font-family:var(--ig-body-1-font-family, var(--ig-font-family));font-size:var(--ig-body-1-font-size);font-weight:var(--ig-body-1-font-weight);font-style:var(--ig-body-1-font-style);line-height:var(--ig-body-1-line-height);letter-spacing:var(--ig-body-1-letter-spacing);text-transform:var(--ig-body-1-text-transform);margin-top:var(--ig-body-1-margin-top);margin-bottom:var(--ig-body-1-margin-bottom);margin:0}:host([maximized]){position:absolute;inset:0;width:100%;height:100%;z-index:10;grid-column:unset;grid-row:unset}:host([maximized]) [part~=base]{width:100%;height:100%}[part=ghost]{position:absolute;top:0;left:0;width:100%;height:100%;transform:scale(0);z-index:10}[part=header]{display:flex;align-items:center;gap:max(var(--is-large, 1)*max(1rem, -1 * 1rem),var(--is-medium, 1)*max(1rem, -1 * 1rem),var(--is-small, 1)*max(0.75rem, -1 * 0.75rem));width:100%;padding-block:var(--pad-block);padding-inline:var(--pad-inline)}:host([disable-fullscreen][disable-maximize]) igc-divider{display:none}[part=title]{display:flex;flex-direction:column;justify-content:center;flex:1 0 0%;overflow:hidden;min-width:2ch}::slotted([slot=title]){font-family:var(--ig-h6-font-family, var(--ig-font-family));font-size:var(--ig-h6-font-size);font-weight:var(--ig-h6-font-weight);font-style:var(--ig-h6-font-style);line-height:var(--ig-h6-line-height);letter-spacing:var(--ig-h6-letter-spacing);text-transform:var(--ig-h6-text-transform);margin-top:var(--ig-h6-margin-top);margin-bottom:var(--ig-h6-margin-bottom);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;width:100%;min-width:2ch;margin-bottom:0;display:block}[part=actions]{display:flex;gap:.5rem;margin-inline-start:auto;flex-shrink:0}@media(forced-colors: active){[part~=trigger],[part~=trigger-side],[part~=trigger-bottom]{border:.0625rem solid CanvasText}[part~=trigger]:hover,[part~=trigger-side]:hover,[part~=trigger-bottom]:hover{border-color:Highlight}[part~=base]:not([part~=resizable]):hover::after{--hover-border-color: Highlight}}`;\n  "]}

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

@@ -1,27 +1,31 @@
 import { isLTR } from '#internals/utils/dom.js';
+function getBaseGhostStyles(tile, computed, background, borderColor) {
+    const { width, height } = tile.getBoundingClientRect();
+    return {
+        position: 'absolute',
+        contain: 'strict',
+        zIndex: 1000,
+        width: `${width}px`,
+        height: `${height}px`,
+        background: computed.getPropertyValue(background),
+        border: `1px solid ${computed.getPropertyValue(borderColor)}`,
+        borderRadius: computed.getPropertyValue('--border-radius'),
+    };
+}
 export function createTileDragGhost(tile) {
     const clone = tile.cloneNode(true);
     const computed = getComputedStyle(tile);
-    const { width, height } = tile.getBoundingClientRect();
     Object.assign(clone, {
         id: null,
         inert: true,
         position: -1,
     });
-    Object.assign(clone.style, {
+    Object.assign(clone.style, getBaseGhostStyles(tile, computed, '--tile-background', '--hover-border-color'), {
         direction: isLTR(tile) ? 'ltr' : 'rtl',
-        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;
@@ -29,20 +33,12 @@ export function createTileDragGhost(tile) {
 export function createTileGhost(tile) {
     const element = document.createElement('div');
     const computed = getComputedStyle(tile);
-    const { x, y, width, height } = tile.getBoundingClientRect();
+    const { x, y } = tile.getBoundingClientRect();
     const { scrollX, scrollY } = window;
-    Object.assign(element.style, {
+    Object.assign(element.style, getBaseGhostStyles(tile, computed, '--placeholder-background', '--ghost-border'), {
         boxSizing: 'border-box',
-        position: 'absolute',
-        contain: 'strict',
         top: `${y + scrollY}px`,
         left: `${x + scrollX}px`,
-        zIndex: 1000,
-        background: computed.getPropertyValue('--placeholder-background'),
-        border: `1px solid ${computed.getPropertyValue('--ghost-border')}`,
-        borderRadius: computed.getPropertyValue('--border-radius'),
-        width: `${width}px`,
-        height: `${height}px`,
     });
     return element;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"tile-ghost-util.js","sourceRoot":"","sources":["../../../src/components/tile-manager/tile-ghost-util.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAGhD,MAAM,UAAU,mBAAmB,CAAC,IAAsB;IACxD,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAqB,CAAC;IACvD,MAAM,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAExC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAEvD,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE;QACnB,EAAE,EAAE,IAAI;QACR,KAAK,EAAE,IAAI;QACX,QAAQ,EAAE,CAAC,CAAC;KACb,CAAC,CAAC;IAEH,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE;QACzB,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK;QACtC,QAAQ,EAAE,UAAU;QACpB,OAAO,EAAE,QAAQ;QACjB,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,GAAG,KAAK,IAAI;QACnB,MAAM,EAAE,GAAG,MAAM,IAAI;QACrB,OAAO,EAAE,GAAG;QACZ,UAAU,EAAE,QAAQ,CAAC,gBAAgB,CAAC,mBAAmB,CAAC;QAC1D,MAAM,EAAE,aAAa,QAAQ,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,EAAE;QACxE,YAAY,EAAE,QAAQ,CAAC,gBAAgB,CAAC,iBAAiB,CAAC;QAC1D,SAAS,EAAE,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,CAAC;QACxD,MAAM,EAAE,IAAI;QACZ,kBAAkB,EAAE,oBAAoB;KACzC,CAAC,CAAC;IAEH,OAAO,KAAK,CAAC;AACf,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,IAAsB;IACpD,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACxC,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC7D,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,MAAM,CAAC;IAEpC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE;QAC3B,SAAS,EAAE,YAAY;QACvB,QAAQ,EAAE,UAAU;QACpB,OAAO,EAAE,QAAQ;QACjB,GAAG,EAAE,GAAG,CAAC,GAAG,OAAO,IAAI;QACvB,IAAI,EAAE,GAAG,CAAC,GAAG,OAAO,IAAI;QACxB,MAAM,EAAE,IAAI;QACZ,UAAU,EAAE,QAAQ,CAAC,gBAAgB,CAAC,0BAA0B,CAAC;QACjE,MAAM,EAAE,aAAa,QAAQ,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,EAAE;QAClE,YAAY,EAAE,QAAQ,CAAC,gBAAgB,CAAC,iBAAiB,CAAC;QAC1D,KAAK,EAAE,GAAG,KAAK,IAAI;QACnB,MAAM,EAAE,GAAG,MAAM,IAAI;KACtB,CAAC,CAAC;IAEH,OAAO,OAAO,CAAC;AACjB,CAAC","sourcesContent":["import { isLTR } from '#internals/utils/dom.js';\nimport type IgcTileComponent from './tile.js';\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  Object.assign(clone, {\n    id: null,\n    inert: true,\n    position: -1,\n  });\n\n  Object.assign(clone.style, {\n    direction: isLTR(tile) ? 'ltr' : 'rtl',\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(tile: IgcTileComponent): HTMLElement {\n  const element = document.createElement('div');\n  const computed = getComputedStyle(tile);\n  const { x, y, width, height } = tile.getBoundingClientRect();\n  const { scrollX, scrollY } = window;\n\n  Object.assign(element.style, {\n    boxSizing: 'border-box',\n    position: 'absolute',\n    contain: 'strict',\n    top: `${y + scrollY}px`,\n    left: `${x + scrollX}px`,\n    zIndex: 1000,\n    background: computed.getPropertyValue('--placeholder-background'),\n    border: `1px solid ${computed.getPropertyValue('--ghost-border')}`,\n    borderRadius: computed.getPropertyValue('--border-radius'),\n    width: `${width}px`,\n    height: `${height}px`,\n  });\n\n  return element;\n}\n"]}
+{"version":3,"file":"tile-ghost-util.js","sourceRoot":"","sources":["../../../src/components/tile-manager/tile-ghost-util.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAIhD,SAAS,kBAAkB,CACzB,IAAsB,EACtB,QAA6B,EAC7B,UAAkB,EAClB,WAAmB;IAEnB,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAEvD,OAAO;QACL,QAAQ,EAAE,UAAU;QACpB,OAAO,EAAE,QAAQ;QACjB,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,GAAG,KAAK,IAAI;QACnB,MAAM,EAAE,GAAG,MAAM,IAAI;QACrB,UAAU,EAAE,QAAQ,CAAC,gBAAgB,CAAC,UAAU,CAAC;QACjD,MAAM,EAAE,aAAa,QAAQ,CAAC,gBAAgB,CAAC,WAAW,CAAC,EAAE;QAC7D,YAAY,EAAE,QAAQ,CAAC,gBAAgB,CAAC,iBAAiB,CAAC;KAC3D,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,IAAsB;IACxD,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAqB,CAAC;IACvD,MAAM,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAExC,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE;QACnB,EAAE,EAAE,IAAI;QACR,KAAK,EAAE,IAAI;QACX,QAAQ,EAAE,CAAC,CAAC;KACb,CAAC,CAAC;IAEH,MAAM,CAAC,MAAM,CACX,KAAK,CAAC,KAAK,EACX,kBAAkB,CAChB,IAAI,EACJ,QAAQ,EACR,mBAAmB,EACnB,sBAAsB,CACvB,EACD;QACE,SAAS,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK;QACtC,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,OAAO,EAAE,GAAG;QACZ,SAAS,EAAE,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,CAAC;QACxD,kBAAkB,EAAE,oBAAoB;KACzC,CACF,CAAC;IAEF,OAAO,KAAK,CAAC;AACf,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,IAAsB;IACpD,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACxC,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC9C,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,MAAM,CAAC;IAEpC,MAAM,CAAC,MAAM,CACX,OAAO,CAAC,KAAK,EACb,kBAAkB,CAChB,IAAI,EACJ,QAAQ,EACR,0BAA0B,EAC1B,gBAAgB,CACjB,EACD;QACE,SAAS,EAAE,YAAY;QACvB,GAAG,EAAE,GAAG,CAAC,GAAG,OAAO,IAAI;QACvB,IAAI,EAAE,GAAG,CAAC,GAAG,OAAO,IAAI;KACzB,CACF,CAAC;IAEF,OAAO,OAAO,CAAC;AACjB,CAAC","sourcesContent":["import { isLTR } from '#internals/utils/dom.js';\nimport type IgcTileComponent from './tile.js';\n\n/** Ghost styling shared between the drag and resize ghosts, themed from the tile's CSS variables. */\nfunction getBaseGhostStyles(\n  tile: IgcTileComponent,\n  computed: CSSStyleDeclaration,\n  background: string,\n  borderColor: string\n) {\n  const { width, height } = tile.getBoundingClientRect();\n\n  return {\n    position: 'absolute',\n    contain: 'strict',\n    zIndex: 1000,\n    width: `${width}px`,\n    height: `${height}px`,\n    background: computed.getPropertyValue(background),\n    border: `1px solid ${computed.getPropertyValue(borderColor)}`,\n    borderRadius: computed.getPropertyValue('--border-radius'),\n  };\n}\n\nexport function createTileDragGhost(tile: IgcTileComponent): IgcTileComponent {\n  const clone = tile.cloneNode(true) as IgcTileComponent;\n  const computed = getComputedStyle(tile);\n\n  Object.assign(clone, {\n    id: null,\n    inert: true,\n    position: -1,\n  });\n\n  Object.assign(\n    clone.style,\n    getBaseGhostStyles(\n      tile,\n      computed,\n      '--tile-background',\n      '--hover-border-color'\n    ),\n    {\n      direction: isLTR(tile) ? 'ltr' : 'rtl',\n      top: 0,\n      left: 0,\n      opacity: 0.6,\n      boxShadow: computed.getPropertyValue('--drag-elevation'),\n      viewTransitionName: 'dragged-tile-ghost',\n    }\n  );\n\n  return clone;\n}\n\nexport function createTileGhost(tile: IgcTileComponent): HTMLElement {\n  const element = document.createElement('div');\n  const computed = getComputedStyle(tile);\n  const { x, y } = tile.getBoundingClientRect();\n  const { scrollX, scrollY } = window;\n\n  Object.assign(\n    element.style,\n    getBaseGhostStyles(\n      tile,\n      computed,\n      '--placeholder-background',\n      '--ghost-border'\n    ),\n    {\n      boxSizing: 'border-box',\n      top: `${y + scrollY}px`,\n      left: `${x + scrollX}px`,\n    }\n  );\n\n  return element;\n}\n"]}

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

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, type PropertyValues } from 'lit';
 import type { TileManagerDragMode, TileManagerResizeMode } from '../types.js';
 import IgcTileComponent from './tile.js';
 /**
@@ -21,6 +21,8 @@ export default class IgcTileManagerComponent extends LitElement {
     static styles: import("lit").CSSResult[];
     static register(): void;
     private _internalStyles;
+    /** Whether any of the tiles is currently in a maximized state. */
+    private _hasMaximizedTile;
     /** Shared config for the properties that project into a grid CSS variable. */
     private static _styleVariable;
     private _serializer;
@@ -72,8 +74,9 @@ export default class IgcTileManagerComponent extends LitElement {
      */
     get tiles(): IgcTileComponent[];
     constructor();
-    protected updated(): void;
+    protected updated(changed: PropertyValues<this>): void;
     protected firstUpdated(): void;
+    private _updateMaximizedTile;
     private _observerCallback;
     /**
      * Locks/unlocks the grid container height in response to a tile's maximized state changing.