igniteui-webcomponents 5.3.0-alpha.0 → 5.3.0-beta.0

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

@@ -8,40 +8,47 @@ var IgcTileManagerComponent_1;
 import { ContextProvider } from '@lit/context';
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
+import { createRef, ref } from 'lit/directives/ref.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { themes } from '../../theming/theming-decorator.js';
-import { tileManagerContext } from '../common/context.js';
+import { tileManagerContext, } from '../common/context.js';
 import { createMutationController, } from '../common/controllers/mutation-observer.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
-import { asNumber, findElementFromEventPath, partNameMap, } from '../common/util.js';
-import { createTilesState, isSameTile, swapTiles } from './position.js';
+import { asNumber, partNameMap } from '../common/util.js';
+import { createTilesState } from './position.js';
 import { createSerializer } from './serializer.js';
 import { all } from './themes/container.js';
 import { styles as shared } from './themes/shared/tile-manager.common.css.js';
 import { styles } from './themes/tile-manager.base.css.js';
+import { DraggedTileAttribute } from './tile-util.js';
 import IgcTileComponent from './tile.js';
 let IgcTileManagerComponent = IgcTileManagerComponent_1 = class IgcTileManagerComponent extends EventEmitterMixin(LitElement) {
     static register() {
         registerComponent(IgcTileManagerComponent_1, IgcTileComponent);
     }
-    _setManagerContext() {
-        this._context.setValue({
+    _createContext() {
+        return {
             instance: this,
-            draggedItem: this._draggedItem,
-            lastSwapTile: this._lastSwapTile,
-        }, true);
+            grid: this._grid,
+        };
     }
-    _observerCallback({ changes: { added, removed }, }) {
-        const ownAdded = added.filter(({ target }) => target.closest(this.tagName) === this);
-        const ownRemoved = removed.filter(({ target }) => target.closest(this.tagName) === this);
-        for (const remove of ownRemoved) {
-            this._tilesState.remove(remove.node);
-        }
-        for (const added of ownAdded) {
-            this._tilesState.add(added.node);
-        }
-        this._tilesState.assignTiles();
+    _setManagerContext() {
+        this._context.setValue(this._createContext(), true);
+    }
+    set resizeMode(value) {
+        this._resizeMode = value;
+        this._setManagerContext();
+    }
+    get resizeMode() {
+        return this._resizeMode;
+    }
+    set dragMode(value) {
+        this._dragMode = value;
+        this._setManagerContext();
+    }
+    get dragMode() {
+        return this._dragMode;
     }
     set columnCount(value) {
         this._columnCount = Math.max(0, asNumber(value));
@@ -85,23 +92,19 @@ let IgcTileManagerComponent = IgcTileManagerComponent_1 = class IgcTileManagerCo
     constructor() {
         super();
         this._internalStyles = {};
+        this._dragMode = 'none';
+        this._resizeMode = 'none';
         this._columnCount = 0;
-        this._draggedItem = null;
-        this._lastSwapTile = null;
         this._serializer = createSerializer(this);
         this._tilesState = createTilesState(this);
+        this._grid = createRef();
         this._context = new ContextProvider(this, {
             context: tileManagerContext,
-            initialValue: {
-                instance: this,
-                draggedItem: this._draggedItem,
-                lastSwapTile: this._lastSwapTile,
-            },
+            initialValue: this._createContext(),
         });
-        this.dragMode = 'slide';
         createMutationController(this, {
             callback: this._observerCallback,
-            filter: [IgcTileComponent.tagName],
+            filter: [`${IgcTileComponent.tagName}:not([${DraggedTileAttribute}])`],
             config: {
                 childList: true,
             },
@@ -110,30 +113,25 @@ let IgcTileManagerComponent = IgcTileManagerComponent_1 = class IgcTileManagerCo
     firstUpdated() {
         this._tilesState.assignPositions();
         this._tilesState.assignTiles();
-    }
-    handleTileDragStart({ detail }) {
-        this.emitEvent('igcTileDragStarted', { detail });
-        this._draggedItem = detail;
         this._setManagerContext();
     }
-    handleTileDragEnd() {
-        if (this._draggedItem) {
-            this._draggedItem = null;
-            this._setManagerContext();
+    _observerCallback({ changes: { added, removed }, }) {
+        const ownAdded = added.filter(({ target }) => target.closest(this.tagName) === this);
+        const ownRemoved = removed.filter(({ target }) => target.closest(this.tagName) === this);
+        for (const remove of ownRemoved) {
+            this._tilesState.remove(remove.node);
         }
-    }
-    handleDragOver(event) {
-        event.preventDefault();
-    }
-    handleDrop(event) {
-        event.preventDefault();
-        const draggedItem = this._draggedItem;
-        const target = findElementFromEventPath(IgcTileComponent.tagName, event);
-        if (!isSameTile(draggedItem, target) &&
-            this.dragMode === 'swap' &&
-            !target?.disableDrag) {
-            swapTiles(draggedItem, target);
+        for (const added of ownAdded) {
+            this._tilesState.add(added.node);
         }
+        this._tilesState.assignTiles();
+    }
+    _handleTileDragStart({ detail }) {
+        this.emitEvent('igcTileDragStarted', { detail });
+        this._setManagerContext();
+    }
+    _handleTileDragEnd({ detail }) {
+        this.emitEvent('igcTileDragEnded', { detail });
     }
     saveLayout() {
         return this._serializer.saveAsJSON();
@@ -148,12 +146,11 @@ let IgcTileManagerComponent = IgcTileManagerComponent_1 = class IgcTileManagerCo
         });
         return html `
       <div
+        ${ref(this._grid)}
         style=${styleMap(this._internalStyles)}
         part=${parts}
-        @tileDragStart=${this.handleTileDragStart}
-        @tileDragEnd=${this.handleTileDragEnd}
-        @dragover=${this.handleDragOver}
-        @drop=${this.handleDrop}
+        @tileDragStart=${this._handleTileDragStart}
+        @tileDragEnd=${this._handleTileDragEnd}
       >
         <slot></slot>
       </div>
@@ -166,9 +163,12 @@ IgcTileManagerComponent.shadowRootOptions = {
     mode: 'open',
     slotAssignment: 'manual',
 };
+__decorate([
+    property({ attribute: 'resize-mode' })
+], IgcTileManagerComponent.prototype, "resizeMode", null);
 __decorate([
     property({ attribute: 'drag-mode' })
-], IgcTileManagerComponent.prototype, "dragMode", void 0);
+], IgcTileManagerComponent.prototype, "dragMode", null);
 __decorate([
     property({ type: Number, attribute: 'column-count' })
 ], IgcTileManagerComponent.prototype, "columnCount", null);

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

@@ -1 +1 @@
-{"version":3,"file":"tile-manager.js","sourceRoot":"","sources":["../../../src/components/tile-manager/tile-manager.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAkB,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAEL,wBAAwB,GACzB,MAAM,4CAA4C,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AAEtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EACL,QAAQ,EACR,wBAAwB,EACxB,WAAW,GACZ,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,4CAA4C,CAAC;AAC9E,OAAO,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAC;AAC3D,OAAO,gBAAgB,MAAM,WAAW,CAAC;AAe1B,IAAM,uBAAuB,+BAA7B,MAAM,uBAAwB,SAAQ,iBAAiB,CAGpE,UAAU,CAAC;IAUJ,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CAAC,yBAAuB,EAAE,gBAAgB,CAAC,CAAC;IAC/D,CAAC;IAuBO,kBAAkB;QACxB,IAAI,CAAC,QAAQ,CAAC,QAAQ,CACpB;YACE,QAAQ,EAAE,IAAI;YACd,WAAW,EAAE,IAAI,CAAC,YAAY;YAC9B,YAAY,EAAE,IAAI,CAAC,aAAa;SACjC,EACD,IAAI,CACL,CAAC;IACJ,CAAC;IAEO,iBAAiB,CAAC,EACxB,OAAO,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,GACgB;QAC3C,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAC3B,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,IAAI,CACtD,CAAC;QACF,MAAM,UAAU,GAAG,OAAO,CAAC,MAAM,CAC/B,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,IAAI,CACtD,CAAC;QAEF,KAAK,MAAM,MAAM,IAAI,UAAU,EAAE,CAAC;YAChC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QACvC,CAAC;QAED,KAAK,MAAM,KAAK,IAAI,QAAQ,EAAE,CAAC;YAC7B,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QACnC,CAAC;QAED,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC;IACjC,CAAC;IAiBD,IAAW,WAAW,CAAC,KAAa;QAClC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;QACjD,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,eAAe,EAAE;YAClC,mBAAmB,EAAE,IAAI,CAAC,YAAY,IAAI,SAAS;SACpD,CAAC,CAAC;IACL,CAAC;IAED,IAAW,WAAW;QACpB,OAAO,IAAI,CAAC,YAAY,CAAC;IAC3B,CAAC;IAOD,IAAW,cAAc,CAAC,KAAyB;QACjD,IAAI,CAAC,YAAY,GAAG,KAAK,IAAI,SAAS,CAAC;QACvC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,eAAe,EAAE;YAClC,oBAAoB,EAAE,IAAI,CAAC,YAAY;SACxC,CAAC,CAAC;IACL,CAAC;IAED,IAAW,cAAc;QACvB,OAAO,IAAI,CAAC,YAAY,CAAC;IAC3B,CAAC;IAOD,IAAW,YAAY,CAAC,KAAyB;QAC/C,IAAI,CAAC,aAAa,GAAG,KAAK,IAAI,SAAS,CAAC;QACxC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,eAAe,EAAE;YAClC,qBAAqB,EAAE,IAAI,CAAC,aAAa;SAC1C,CAAC,CAAC;IACL,CAAC;IAED,IAAW,YAAY;QACrB,OAAO,IAAI,CAAC,aAAa,CAAC;IAC5B,CAAC;IAMD,IAAW,GAAG,CAAC,KAAyB;QACtC,IAAI,CAAC,IAAI,GAAG,KAAK,IAAI,SAAS,CAAC;QAC/B,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,eAAe,EAAE;YAClC,UAAU,EAAE,IAAI,CAAC,IAAI;SACtB,CAAC,CAAC;IACL,CAAC;IAED,IAAW,GAAG;QACZ,OAAO,IAAI,CAAC,IAAI,CAAC;IACnB,CAAC;IAMD,IAAW,KAAK;QACd,OAAO,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;IAChC,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QAvIF,oBAAe,GAAc,EAAE,CAAC;QAEhC,iBAAY,GAAG,CAAC,CAAC;QAIjB,iBAAY,GAA4B,IAAI,CAAC;QAC7C,kBAAa,GAA4B,IAAI,CAAC;QAE9C,gBAAW,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACrC,gBAAW,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;QAErC,aAAQ,GAAG,IAAI,eAAe,CAAC,IAAI,EAAE;YAC3C,OAAO,EAAE,kBAAkB;YAC3B,YAAY,EAAE;gBACZ,QAAQ,EAAE,IAAI;gBACd,WAAW,EAAE,IAAI,CAAC,YAAY;gBAC9B,YAAY,EAAE,IAAI,CAAC,aAAa;aACjC;SACF,CAAC,CAAC;QAuCI,aAAQ,GAAqB,OAAO,CAAC;QA+E1C,wBAAwB,CAAC,IAAI,EAAE;YAC7B,QAAQ,EAAE,IAAI,CAAC,iBAAiB;YAChC,MAAM,EAAE,CAAC,gBAAgB,CAAC,OAAO,CAAC;YAClC,MAAM,EAAE;gBACN,SAAS,EAAE,IAAI;aAChB;SACF,CAAC,CAAC;IACL,CAAC;IAEkB,YAAY;QAC7B,IAAI,CAAC,WAAW,CAAC,eAAe,EAAE,CAAC;QACnC,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC;IACjC,CAAC;IAEO,mBAAmB,CAAC,EAAE,MAAM,EAAiC;QACnE,IAAI,CAAC,SAAS,CAAC,oBAAoB,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;QACjD,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC;QAC3B,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAC5B,CAAC;IAEO,iBAAiB;QACvB,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;YACzB,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC5B,CAAC;IACH,CAAC;IAEO,cAAc,CAAC,KAAgB;QACrC,KAAK,CAAC,cAAc,EAAE,CAAC;IACzB,CAAC;IAEO,UAAU,CAAC,KAAgB;QACjC,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,CAAC;QACtC,MAAM,MAAM,GAAG,wBAAwB,CACrC,gBAAgB,CAAC,OAAO,EACxB,KAAK,CACN,CAAC;QAEF,IACE,CAAC,UAAU,CAAC,WAAW,EAAE,MAAM,CAAC;YAChC,IAAI,CAAC,QAAQ,KAAK,MAAM;YACxB,CAAC,MAAM,EAAE,WAAW,EACpB,CAAC;YACD,SAAS,CAAC,WAAY,EAAE,MAAO,CAAC,CAAC;QACnC,CAAC;IACH,CAAC;IAEM,UAAU;QACf,OAAO,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE,CAAC;IACvC,CAAC;IAEM,UAAU,CAAC,IAAY;QAC5B,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;IACtC,CAAC;IAEkB,MAAM;QACvB,MAAM,KAAK,GAAG,WAAW,CAAC;YACxB,IAAI,EAAE,IAAI;YACV,gBAAgB,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC;SAC5D,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;;gBAEC,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC;eAC/B,KAAK;yBACK,IAAI,CAAC,mBAAmB;uBAC1B,IAAI,CAAC,iBAAiB;oBACzB,IAAI,CAAC,cAAc;gBACvB,IAAI,CAAC,UAAU;;;;KAI1B,CAAC;IACJ,CAAC;;AAjOsB,+BAAO,GAAG,kBAAkB,AAArB,CAAsB;AACtC,8BAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;AAEvB,yCAAiB,GAAmB;IACnD,IAAI,EAAE,MAAM;IACZ,cAAc,EAAE,QAAQ;CACzB,AAHiC,CAGhC;AAiEK;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;yDACO;AAU5C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;0DAMrD;AAWD;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;6DAM3C;AAWD;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;2DAMzC;AAUD;IADC,QAAQ,EAAE;kDAMV;AAzIkB,uBAAuB;IAD3C,MAAM,CAAC,GAAG,CAAC;GACS,uBAAuB,CAsO3C;eAtOoB,uBAAuB","sourcesContent":["import { ContextProvider } from '@lit/context';\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { type StyleInfo, styleMap } from 'lit/directives/style-map.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport { tileManagerContext } from '../common/context.js';\nimport {\n  type MutationControllerParams,\n  createMutationController,\n} from '../common/controllers/mutation-observer.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport {\n  asNumber,\n  findElementFromEventPath,\n  partNameMap,\n} from '../common/util.js';\nimport { createTilesState, isSameTile, swapTiles } from './position.js';\nimport { createSerializer } from './serializer.js';\nimport { all } from './themes/container.js';\nimport { styles as shared } from './themes/shared/tile-manager.common.css.js';\nimport { styles } from './themes/tile-manager.base.css.js';\nimport IgcTileComponent from './tile.js';\n\n// REVIEW: WIP\nexport interface IgcTileManagerComponentEventMap {\n  igcTileDragStarted: CustomEvent<IgcTileComponent>;\n}\n\n/**\n * The tile manager component enables the dynamic arrangement, resizing, and interaction of tiles.\n *\n * @element igc-tile-manager\n *\n * @fires igcTileDragStarted - Fired when an owning tile begins a drag operation.\n */\n@themes(all)\nexport default class IgcTileManagerComponent extends EventEmitterMixin<\n  IgcTileManagerComponentEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-tile-manager';\n  public static styles = [styles, shared];\n\n  protected static shadowRootOptions: ShadowRootInit = {\n    mode: 'open',\n    slotAssignment: 'manual',\n  };\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcTileManagerComponent, IgcTileComponent);\n  }\n\n  private _internalStyles: StyleInfo = {};\n\n  private _columnCount = 0;\n  private _gap?: string;\n  private _minColWidth?: string;\n  private _minRowHeight?: string;\n  private _draggedItem: IgcTileComponent | null = null;\n  private _lastSwapTile: IgcTileComponent | null = null;\n\n  private _serializer = createSerializer(this);\n  private _tilesState = createTilesState(this);\n\n  private _context = new ContextProvider(this, {\n    context: tileManagerContext,\n    initialValue: {\n      instance: this,\n      draggedItem: this._draggedItem,\n      lastSwapTile: this._lastSwapTile,\n    },\n  });\n\n  private _setManagerContext() {\n    this._context.setValue(\n      {\n        instance: this,\n        draggedItem: this._draggedItem,\n        lastSwapTile: this._lastSwapTile,\n      },\n      true\n    );\n  }\n\n  private _observerCallback({\n    changes: { added, removed },\n  }: MutationControllerParams<IgcTileComponent>) {\n    const ownAdded = added.filter(\n      ({ target }) => target.closest(this.tagName) === this\n    );\n    const ownRemoved = removed.filter(\n      ({ target }) => target.closest(this.tagName) === this\n    );\n\n    for (const remove of ownRemoved) {\n      this._tilesState.remove(remove.node);\n    }\n\n    for (const added of ownAdded) {\n      this._tilesState.add(added.node);\n    }\n\n    this._tilesState.assignTiles();\n  }\n\n  /**\n   * Determines whether the tiles slide or swap on drop.\n   * @attr drag-mode\n   */\n  @property({ attribute: 'drag-mode' })\n  public dragMode: 'slide' | 'swap' = 'slide';\n\n  /**\n   * Sets the number of columns for the tile manager.\n   * Setting value <= than zero will trigger a responsive layout.\n   *\n   * @attr column-count\n   * @default 0\n   */\n  @property({ type: Number, attribute: 'column-count' })\n  public set columnCount(value: number) {\n    this._columnCount = Math.max(0, asNumber(value));\n    Object.assign(this._internalStyles, {\n      '--ig-column-count': this._columnCount || undefined,\n    });\n  }\n\n  public get columnCount(): number {\n    return this._columnCount;\n  }\n\n  /**\n   * Sets the minimum width for a column unit in the tile manager.\n   * @attr min-column-width\n   */\n  @property({ attribute: 'min-column-width' })\n  public set minColumnWidth(value: string | undefined) {\n    this._minColWidth = value ?? undefined;\n    Object.assign(this._internalStyles, {\n      '--ig-min-col-width': this._minColWidth,\n    });\n  }\n\n  public get minColumnWidth(): string | undefined {\n    return this._minColWidth;\n  }\n\n  /**\n   * Sets the minimum height for a row unit in the tile manager.\n   * @attr min-row-height\n   */\n  @property({ attribute: 'min-row-height' })\n  public set minRowHeight(value: string | undefined) {\n    this._minRowHeight = value ?? undefined;\n    Object.assign(this._internalStyles, {\n      '--ig-min-row-height': this._minRowHeight,\n    });\n  }\n\n  public get minRowHeight(): string | undefined {\n    return this._minRowHeight;\n  }\n\n  /**\n   * Sets the gap size of the the tile manager.\n   */\n  @property()\n  public set gap(value: string | undefined) {\n    this._gap = value ?? undefined;\n    Object.assign(this._internalStyles, {\n      '--ig-gap': this._gap,\n    });\n  }\n\n  public get gap(): string | undefined {\n    return this._gap;\n  }\n\n  /**\n   * Gets the tiles sorted by their position in the layout.\n   * @attr\n   */\n  public get tiles() {\n    return this._tilesState.tiles;\n  }\n\n  constructor() {\n    super();\n\n    createMutationController(this, {\n      callback: this._observerCallback,\n      filter: [IgcTileComponent.tagName],\n      config: {\n        childList: true,\n      },\n    });\n  }\n\n  protected override firstUpdated() {\n    this._tilesState.assignPositions();\n    this._tilesState.assignTiles();\n  }\n\n  private handleTileDragStart({ detail }: CustomEvent<IgcTileComponent>) {\n    this.emitEvent('igcTileDragStarted', { detail });\n    this._draggedItem = detail;\n    this._setManagerContext();\n  }\n\n  private handleTileDragEnd() {\n    if (this._draggedItem) {\n      this._draggedItem = null;\n      this._setManagerContext();\n    }\n  }\n\n  private handleDragOver(event: DragEvent) {\n    event.preventDefault(); // Allow dropping\n  }\n\n  private handleDrop(event: DragEvent) {\n    event.preventDefault();\n\n    const draggedItem = this._draggedItem;\n    const target = findElementFromEventPath<IgcTileComponent>(\n      IgcTileComponent.tagName,\n      event\n    );\n\n    if (\n      !isSameTile(draggedItem, target) &&\n      this.dragMode === 'swap' &&\n      !target?.disableDrag\n    ) {\n      swapTiles(draggedItem!, target!);\n    }\n  }\n\n  public saveLayout(): string {\n    return this._serializer.saveAsJSON();\n  }\n\n  public loadLayout(data: string): void {\n    this._serializer.loadFromJSON(data);\n  }\n\n  protected override render() {\n    const parts = partNameMap({\n      base: true,\n      'maximized-tile': this.tiles.some((tile) => tile.maximized),\n    });\n\n    return html`\n      <div\n        style=${styleMap(this._internalStyles)}\n        part=${parts}\n        @tileDragStart=${this.handleTileDragStart}\n        @tileDragEnd=${this.handleTileDragEnd}\n        @dragover=${this.handleDragOver}\n        @drop=${this.handleDrop}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-tile-manager': IgcTileManagerComponent;\n  }\n}\n"]}
+{"version":3,"file":"tile-manager.js","sourceRoot":"","sources":["../../../src/components/tile-manager/tile-manager.ts"],"names":[],"mappings":"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","sourcesContent":["import { ContextProvider } from '@lit/context';\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { createRef, ref } from 'lit/directives/ref.js';\nimport { type StyleInfo, styleMap } from 'lit/directives/style-map.js';\nimport { themes } from '../../theming/theming-decorator.js';\nimport {\n  type TileManagerContext,\n  tileManagerContext,\n} from '../common/context.js';\nimport {\n  type MutationControllerParams,\n  createMutationController,\n} from '../common/controllers/mutation-observer.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport type { Constructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { asNumber, partNameMap } from '../common/util.js';\nimport type { TileManagerDragMode, TileManagerResizeMode } from '../types.js';\nimport { createTilesState } from './position.js';\nimport { createSerializer } from './serializer.js';\nimport { all } from './themes/container.js';\nimport { styles as shared } from './themes/shared/tile-manager.common.css.js';\nimport { styles } from './themes/tile-manager.base.css.js';\nimport { DraggedTileAttribute } from './tile-util.js';\nimport IgcTileComponent from './tile.js';\n\n// REVIEW: WIP\nexport interface IgcTileManagerComponentEventMap {\n  igcTileDragStarted: CustomEvent<IgcTileComponent>;\n  igcTileDragEnded: CustomEvent<IgcTileComponent>;\n}\n\n/**\n * The tile manager component enables the dynamic arrangement, resizing, and interaction of tiles.\n *\n * @element igc-tile-manager\n *\n * @fires igcTileDragStarted - Fired when an owning tile begins a drag operation.\n * @fires igcTileDragEnded - Fired when an owning tile completes a drag operation, either by dropping onto a new position or canceling the drag.\n */\n@themes(all)\nexport default class IgcTileManagerComponent extends EventEmitterMixin<\n  IgcTileManagerComponentEventMap,\n  Constructor<LitElement>\n>(LitElement) {\n  public static readonly tagName = 'igc-tile-manager';\n  public static styles = [styles, shared];\n\n  protected static shadowRootOptions: ShadowRootInit = {\n    mode: 'open',\n    slotAssignment: 'manual',\n  };\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcTileManagerComponent, IgcTileComponent);\n  }\n\n  // #region Internal state\n\n  private _internalStyles: StyleInfo = {};\n  private _dragMode: TileManagerDragMode = 'none';\n  private _resizeMode: TileManagerResizeMode = 'none';\n  private _columnCount = 0;\n  private _gap?: string;\n  private _minColWidth?: string;\n  private _minRowHeight?: string;\n\n  private _serializer = createSerializer(this);\n  private _tilesState = createTilesState(this);\n\n  private _grid = createRef<HTMLElement>();\n\n  // #endregion\n\n  // #region Context helpers\n\n  private _context = new ContextProvider(this, {\n    context: tileManagerContext,\n    initialValue: this._createContext(),\n  });\n\n  private _createContext(): TileManagerContext {\n    return {\n      instance: this,\n      grid: this._grid,\n    };\n  }\n\n  private _setManagerContext(): void {\n    this._context.setValue(this._createContext(), true);\n  }\n\n  // #endregion\n\n  // #region Properties and Attributes\n\n  /**\n   * Whether resize operations are enabled.\n   *\n   * @attr resize-mode\n   * @default none\n   */\n  @property({ attribute: 'resize-mode' })\n  public set resizeMode(value: TileManagerResizeMode) {\n    this._resizeMode = value;\n    this._setManagerContext();\n  }\n\n  public get resizeMode(): TileManagerResizeMode {\n    return this._resizeMode;\n  }\n\n  /**\n   * Whether drag and drop operations are enabled.\n   *\n   * @attr drag-mode\n   * @default none\n   */\n  @property({ attribute: 'drag-mode' })\n  public set dragMode(value: TileManagerDragMode) {\n    this._dragMode = value;\n    this._setManagerContext();\n  }\n\n  public get dragMode(): TileManagerDragMode {\n    return this._dragMode;\n  }\n\n  /**\n   * Sets the number of columns for the tile manager.\n   * Setting value <= than zero will trigger a responsive layout.\n   *\n   * @attr column-count\n   * @default 0\n   */\n  @property({ type: Number, attribute: 'column-count' })\n  public set columnCount(value: number) {\n    this._columnCount = Math.max(0, asNumber(value));\n    Object.assign(this._internalStyles, {\n      '--ig-column-count': this._columnCount || undefined,\n    });\n  }\n\n  public get columnCount(): number {\n    return this._columnCount;\n  }\n\n  /**\n   * Sets the minimum width for a column unit in the tile manager.\n   * @attr min-column-width\n   */\n  @property({ attribute: 'min-column-width' })\n  public set minColumnWidth(value: string | undefined) {\n    this._minColWidth = value ?? undefined;\n    Object.assign(this._internalStyles, {\n      '--ig-min-col-width': this._minColWidth,\n    });\n  }\n\n  public get minColumnWidth(): string | undefined {\n    return this._minColWidth;\n  }\n\n  /**\n   * Sets the minimum height for a row unit in the tile manager.\n   * @attr min-row-height\n   */\n  @property({ attribute: 'min-row-height' })\n  public set minRowHeight(value: string | undefined) {\n    this._minRowHeight = value ?? undefined;\n    Object.assign(this._internalStyles, {\n      '--ig-min-row-height': this._minRowHeight,\n    });\n  }\n\n  public get minRowHeight(): string | undefined {\n    return this._minRowHeight;\n  }\n\n  /**\n   * Sets the gap size of the the tile manager.\n   *\n   * @attr gap\n   */\n  @property()\n  public set gap(value: string | undefined) {\n    this._gap = value ?? undefined;\n    Object.assign(this._internalStyles, {\n      '--ig-gap': this._gap,\n    });\n  }\n\n  public get gap(): string | undefined {\n    return this._gap;\n  }\n\n  /**\n   * Gets the tiles sorted by their position in the layout.\n   * @property\n   */\n  public get tiles() {\n    return this._tilesState.tiles;\n  }\n\n  // #endregion\n\n  // #region Internal API\n\n  constructor() {\n    super();\n\n    createMutationController(this, {\n      callback: this._observerCallback,\n      filter: [`${IgcTileComponent.tagName}:not([${DraggedTileAttribute}])`],\n      config: {\n        childList: true,\n      },\n    });\n  }\n\n  protected override firstUpdated() {\n    this._tilesState.assignPositions();\n    this._tilesState.assignTiles();\n    this._setManagerContext();\n  }\n\n  private _observerCallback({\n    changes: { added, removed },\n  }: MutationControllerParams<IgcTileComponent>) {\n    const ownAdded = added.filter(\n      ({ target }) => target.closest(this.tagName) === this\n    );\n    const ownRemoved = removed.filter(\n      ({ target }) => target.closest(this.tagName) === this\n    );\n\n    for (const remove of ownRemoved) {\n      this._tilesState.remove(remove.node);\n    }\n\n    for (const added of ownAdded) {\n      this._tilesState.add(added.node);\n    }\n\n    this._tilesState.assignTiles();\n  }\n\n  private _handleTileDragStart({ detail }: CustomEvent<IgcTileComponent>) {\n    this.emitEvent('igcTileDragStarted', { detail });\n    this._setManagerContext();\n  }\n\n  private _handleTileDragEnd({ detail }: CustomEvent<IgcTileComponent>) {\n    this.emitEvent('igcTileDragEnded', { detail });\n  }\n\n  // #endregion\n\n  // #region Public API\n\n  public saveLayout(): string {\n    return this._serializer.saveAsJSON();\n  }\n\n  public loadLayout(data: string): void {\n    this._serializer.loadFromJSON(data);\n  }\n\n  // #endregion\n\n  // #region Rendering\n\n  protected override render() {\n    const parts = partNameMap({\n      base: true,\n      'maximized-tile': this.tiles.some((tile) => tile.maximized),\n    });\n\n    return html`\n      <div\n        ${ref(this._grid)}\n        style=${styleMap(this._internalStyles)}\n        part=${parts}\n        @tileDragStart=${this._handleTileDragStart}\n        @tileDragEnd=${this._handleTileDragEnd}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  // #endregion\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-tile-manager': IgcTileManagerComponent;\n  }\n}\n"]}

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

@@ -1,70 +1,281 @@
-export class ResizeUtil {
-    static calculateSnappedHeight(deltaY, startingY, rowHeights, rowGap, initialTop, initialHeight) {
-        const snappedHeight = startingY + deltaY;
-        const rowsAbove = ResizeUtil.calculate(initialTop, rowHeights, rowGap).targetIndex || 0;
-        const res = ResizeUtil.calculate(snappedHeight, rowHeights, rowGap);
-        const accumulatedHeight = res.accumulatedHeight;
-        const startRowIndex = res.targetIndex;
-        const aboveRowsHeight = ResizeUtil.accumulateHeight(rowsAbove, rowHeights, rowGap);
-        let result = initialHeight;
-        let previousRowsHeight = ResizeUtil.accumulateHeight(startRowIndex, rowHeights, rowGap);
-        if (deltaY > 0) {
-            const rowHeight = rowHeights[startRowIndex];
-            const halfwayThreshold = previousRowsHeight + rowGap + rowHeight / 2;
-            if (snappedHeight >= halfwayThreshold) {
-                result = accumulatedHeight - aboveRowsHeight;
+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;
             }
-            else {
-                result = initialHeight + deltaY;
+            if (colStart + colSpan - 1 > columnCount) {
+                tile.colSpan = columnCount - colStart + 1;
             }
-            result = result <= 0 ? rowHeights[startRowIndex - 1] : result;
         }
-        else if (deltaY < 0) {
-            previousRowsHeight =
-                previousRowsHeight === 0 ? rowHeights[0] : previousRowsHeight;
-            const currentRowHeight = rowHeights[startRowIndex];
-            const halfwayThreshold = accumulatedHeight - currentRowHeight / 2 - rowGap;
-            if (startRowIndex !== 0 && startRowIndex >= startRowIndex - 1) {
-                if (snappedHeight <= halfwayThreshold) {
-                    result =
-                        accumulatedHeight - currentRowHeight - rowGap - aboveRowsHeight;
+    }
+    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 {
-                    result = rowHeights
-                        .slice(rowsAbove, startRowIndex)
-                        .reduce((sum, height) => sum + height, 0);
+            }
+            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 {
-                result = snappedHeight - aboveRowsHeight;
+                break;
             }
+            accumulatedSize += currentSize + this.gap;
         }
-        return result;
-    }
-    static calculateSnappedWidth(deltaX, initialWidth, gap, gridColumnWidth) {
-        const newSize = initialWidth + deltaX;
-        const totalSpan = Math.round(newSize / (gridColumnWidth + gap));
-        const snappedWidth = totalSpan * gridColumnWidth + (totalSpan - 1) * gap;
-        return snappedWidth < gridColumnWidth ? gridColumnWidth : snappedWidth;
-    }
-    static calculate(initialTop, rowHeights, rowGap) {
-        let targetIndex = 0;
-        let accumulatedHeight = 0;
-        for (let i = 0; i < rowHeights.length; i++) {
-            accumulatedHeight += rowHeights[i] + (i > 0 ? rowGap : 0);
-            if (initialTop <= accumulatedHeight) {
-                targetIndex = i;
-                break;
+        return 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 { targetIndex, accumulatedHeight };
+        return 1;
+    }
+    calculateAdditionalSpan(remainingSize, currentSpan, minSize, allowOverflow) {
+        if (allowOverflow) {
+            const additionalSpan = Math.ceil(remainingSize / (minSize + this.gap));
+            return currentSpan + additionalSpan;
+        }
+        return currentSpan;
     }
-    static accumulateHeight(rowIndex, rowHeights, rowGap) {
-        let accumulatedHeight = 0;
-        for (let i = 0; i < rowIndex; i++) {
-            accumulatedHeight += rowHeights[i] + rowGap;
+    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 accumulatedHeight;
+        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

@@ -1 +1 @@
-{"version":3,"file":"tile-util.js","sourceRoot":"","sources":["../../../src/components/tile-manager/tile-util.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,UAAU;IACd,MAAM,CAAC,sBAAsB,CAClC,MAAc,EACd,SAAiB,EACjB,UAAoB,EACpB,MAAc,EACd,UAAkB,EAClB,aAAqB;QAErB,MAAM,aAAa,GAAG,SAAS,GAAG,MAAM,CAAC;QACzC,MAAM,SAAS,GACb,UAAU,CAAC,SAAS,CAAC,UAAU,EAAE,UAAU,EAAE,MAAM,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC;QACxE,MAAM,GAAG,GAAG,UAAU,CAAC,SAAS,CAAC,aAAa,EAAE,UAAU,EAAE,MAAM,CAAE,CAAC;QACrE,MAAM,iBAAiB,GAAG,GAAG,CAAC,iBAAiB,CAAC;QAChD,MAAM,aAAa,GAAG,GAAG,CAAC,WAAW,CAAC;QACtC,MAAM,eAAe,GAAG,UAAU,CAAC,gBAAgB,CACjD,SAAS,EACT,UAAU,EACV,MAAM,CACP,CAAC;QAEF,IAAI,MAAM,GAAG,aAAa,CAAC;QAC3B,IAAI,kBAAkB,GAAG,UAAU,CAAC,gBAAgB,CAClD,aAAa,EACb,UAAU,EACV,MAAM,CACP,CAAC;QAEF,IAAI,MAAM,GAAG,CAAC,EAAE,CAAC;YACf,MAAM,SAAS,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;YAC5C,MAAM,gBAAgB,GAAG,kBAAkB,GAAG,MAAM,GAAG,SAAS,GAAG,CAAC,CAAC;YAErE,IAAI,aAAa,IAAI,gBAAgB,EAAE,CAAC;gBACtC,MAAM,GAAG,iBAAiB,GAAG,eAAe,CAAC;YAC/C,CAAC;iBAAM,CAAC;gBACN,MAAM,GAAG,aAAa,GAAG,MAAM,CAAC;YAClC,CAAC;YAED,MAAM,GAAG,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;QAChE,CAAC;aAAM,IAAI,MAAM,GAAG,CAAC,EAAE,CAAC;YACtB,kBAAkB;gBAChB,kBAAkB,KAAK,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC;YAChE,MAAM,gBAAgB,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;YACnD,MAAM,gBAAgB,GACpB,iBAAiB,GAAG,gBAAgB,GAAG,CAAC,GAAG,MAAM,CAAC;YAEpD,IAAI,aAAa,KAAK,CAAC,IAAI,aAAa,IAAI,aAAa,GAAG,CAAC,EAAE,CAAC;gBAC9D,IAAI,aAAa,IAAI,gBAAgB,EAAE,CAAC;oBACtC,MAAM;wBACJ,iBAAiB,GAAG,gBAAgB,GAAG,MAAM,GAAG,eAAe,CAAC;gBACpE,CAAC;qBAAM,CAAC;oBACN,MAAM,GAAG,UAAU;yBAChB,KAAK,CAAC,SAAS,EAAE,aAAa,CAAC;yBAC/B,MAAM,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,CAAC,GAAG,GAAG,MAAM,EAAE,CAAC,CAAC,CAAC;gBAC9C,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,MAAM,GAAG,aAAa,GAAG,eAAe,CAAC;YAC3C,CAAC;QACH,CAAC;QAED,OAAO,MAAM,CAAC;IAChB,CAAC;IAEM,MAAM,CAAC,qBAAqB,CACjC,MAAc,EACd,YAAoB,EACpB,GAAW,EACX,eAAuB;QAEvB,MAAM,OAAO,GAAG,YAAY,GAAG,MAAM,CAAC;QACtC,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,CAAC,eAAe,GAAG,GAAG,CAAC,CAAC,CAAC;QAChE,MAAM,YAAY,GAAG,SAAS,GAAG,eAAe,GAAG,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;QAEzE,OAAO,YAAY,GAAG,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,YAAY,CAAC;IACzE,CAAC;IAEM,MAAM,CAAC,SAAS,CACrB,UAAkB,EAClB,UAAoB,EACpB,MAAc;QAEd,IAAI,WAAW,GAAG,CAAC,CAAC;QACpB,IAAI,iBAAiB,GAAG,CAAC,CAAC;QAE1B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAC3C,iBAAiB,IAAI,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC1D,IAAI,UAAU,IAAI,iBAAiB,EAAE,CAAC;gBACpC,WAAW,GAAG,CAAC,CAAC;gBAChB,MAAM;YACR,CAAC;QACH,CAAC;QAED,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,CAAC;IAC5C,CAAC;IAEO,MAAM,CAAC,gBAAgB,CAC7B,QAAgB,EAChB,UAAoB,EACpB,MAAc;QAEd,IAAI,iBAAiB,GAAG,CAAC,CAAC;QAC1B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,EAAE,CAAC,EAAE,EAAE,CAAC;YAClC,iBAAiB,IAAI,UAAU,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC;QAC9C,CAAC;QAED,OAAO,iBAAiB,CAAC;IAC3B,CAAC;CACF","sourcesContent":["export class ResizeUtil {\n  public static calculateSnappedHeight(\n    deltaY: number,\n    startingY: number,\n    rowHeights: number[],\n    rowGap: number,\n    initialTop: number,\n    initialHeight: number\n  ): number {\n    const snappedHeight = startingY + deltaY;\n    const rowsAbove =\n      ResizeUtil.calculate(initialTop, rowHeights, rowGap).targetIndex || 0;\n    const res = ResizeUtil.calculate(snappedHeight, rowHeights, rowGap)!;\n    const accumulatedHeight = res.accumulatedHeight;\n    const startRowIndex = res.targetIndex;\n    const aboveRowsHeight = ResizeUtil.accumulateHeight(\n      rowsAbove,\n      rowHeights,\n      rowGap\n    );\n\n    let result = initialHeight;\n    let previousRowsHeight = ResizeUtil.accumulateHeight(\n      startRowIndex,\n      rowHeights,\n      rowGap\n    );\n\n    if (deltaY > 0) {\n      const rowHeight = rowHeights[startRowIndex];\n      const halfwayThreshold = previousRowsHeight + rowGap + rowHeight / 2;\n\n      if (snappedHeight >= halfwayThreshold) {\n        result = accumulatedHeight - aboveRowsHeight;\n      } else {\n        result = initialHeight + deltaY;\n      }\n\n      result = result <= 0 ? rowHeights[startRowIndex - 1] : result;\n    } else if (deltaY < 0) {\n      previousRowsHeight =\n        previousRowsHeight === 0 ? rowHeights[0] : previousRowsHeight;\n      const currentRowHeight = rowHeights[startRowIndex];\n      const halfwayThreshold =\n        accumulatedHeight - currentRowHeight / 2 - rowGap;\n\n      if (startRowIndex !== 0 && startRowIndex >= startRowIndex - 1) {\n        if (snappedHeight <= halfwayThreshold) {\n          result =\n            accumulatedHeight - currentRowHeight - rowGap - aboveRowsHeight;\n        } else {\n          result = rowHeights\n            .slice(rowsAbove, startRowIndex)\n            .reduce((sum, height) => sum + height, 0);\n        }\n      } else {\n        result = snappedHeight - aboveRowsHeight;\n      }\n    }\n\n    return result;\n  }\n\n  public static calculateSnappedWidth(\n    deltaX: number,\n    initialWidth: number,\n    gap: number,\n    gridColumnWidth: number\n  ): number {\n    const newSize = initialWidth + deltaX;\n    const totalSpan = Math.round(newSize / (gridColumnWidth + gap));\n    const snappedWidth = totalSpan * gridColumnWidth + (totalSpan - 1) * gap;\n\n    return snappedWidth < gridColumnWidth ? gridColumnWidth : snappedWidth;\n  }\n\n  public static calculate(\n    initialTop: number,\n    rowHeights: number[],\n    rowGap: number\n  ): any {\n    let targetIndex = 0;\n    let accumulatedHeight = 0;\n\n    for (let i = 0; i < rowHeights.length; i++) {\n      accumulatedHeight += rowHeights[i] + (i > 0 ? rowGap : 0);\n      if (initialTop <= accumulatedHeight) {\n        targetIndex = i;\n        break;\n      }\n    }\n\n    return { targetIndex, accumulatedHeight };\n  }\n\n  private static accumulateHeight(\n    rowIndex: number,\n    rowHeights: number[],\n    rowGap: number\n  ): number {\n    let accumulatedHeight = 0;\n    for (let i = 0; i < rowIndex; i++) {\n      accumulatedHeight += rowHeights[i] + rowGap;\n    }\n\n    return accumulatedHeight;\n  }\n}\n"]}
+{"version":3,"file":"tile-util.js","sourceRoot":"","sources":["../../../src/components/tile-manager/tile-util.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAcpD,MAAM,CAAC,MAAM,oBAAoB,GAAG,sBAAsB,CAAC;AAI3D,MAAM,SAAS,GAAG,IAAI,MAAM,CAAC,+CAA+C,CAAC,CAAC;AAE9E,SAAS,iBAAiB,CAAC,IAAsB;IAC/C,MAAM,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACxC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,QAAQ,CAAC;IAEzC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG;QACpB,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,MAAO;QACzD,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,MAAO;KACvD,CAAC;IAEF,OAAO;QACL,MAAM,EAAE;YACN,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;YACjC,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;SAChC;QACD,GAAG,EAAE,EAAE,KAAK,EAAE,QAAQ,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE;KACtE,CAAC;AACJ,CAAC;AAED,SAAS,mBAAmB,CAAC,aAA0B;IACrD,MAAM,QAAQ,GAAG,gBAAgB,CAAC,aAAa,CAAC,CAAC;IACjD,MAAM,EAAE,GAAG,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAG,QAAQ,CAAC;IAEhE,MAAM,OAAO,GAAG,mBAAmB,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAC7D,MAAM,IAAI,GAAG,gBAAgB,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAEvD,OAAO;QACL,GAAG,EAAE,QAAQ,CAAC,GAAG,CAAC;QAClB,OAAO,EAAE;YACP,KAAK,EAAE,OAAO,CAAC,MAAM;YACrB,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,QAAQ,CAAC,QAAQ,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;SACnE;QACD,IAAI,EAAE;YACJ,KAAK,EAAE,IAAI,CAAC,MAAM;YAClB,OAAO,EAAE,IAAI;YACb,OAAO,EAAE,QAAQ,CAAC,QAAQ,CAAC,gBAAgB,CAAC,qBAAqB,CAAC,CAAC;SACpE;KACF,CAAC;AACJ,CAAC;AAED,MAAM,eAAe;IAArB;QAGY,SAAI,GAAG,CAAC,CAAC;QACT,gBAAW,GAAG,CAAC,CAAC;QAChB,gBAAW,GAAG,CAAC,CAAC;QAEhB,sBAAiB,GAAG,CAAC,CAAC;QACtB,uBAAkB,GAAG,CAAC,CAAC;QAEvB,cAAS,GAAqB;YACtC,MAAM,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE;YAC7B,GAAG,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE;SAC3B,CAAC;QAEQ,aAAQ,GAAsB;YACtC,KAAK,EAAE,CAAC;YACR,OAAO,EAAE,EAAE;YACX,OAAO,EAAE,CAAC;SACX,CAAC;QAEQ,UAAK,GAAsB;YACnC,KAAK,EAAE,CAAC;YACR,OAAO,EAAE,EAAE;YACX,OAAO,EAAE,CAAC;SACX,CAAC;IA8TJ,CAAC;IA5TC,IAAW,GAAG;QACZ,OAAO,IAAI,CAAC,IAAI,CAAC;IACnB,CAAC;IAED,IAAW,QAAQ;QACjB,OAAO,eAAe,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACzC,CAAC;IAED,IAAW,OAAO;QAChB,OAAO,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACxC,CAAC;IAED,IAAW,IAAI;QACb,OAAO,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC;IAEM,qBAAqB,CAAC,KAAkB;QAC7C,MAAM,MAAM,GAAG,IAAI,CAAC,yBAAyB,CAC3C,KAAK,CAAC,OAAO,CAAC,KAAK,EACnB,KAAK,CAAC,MAAM,EACZ,IAAI,CAAC,WAAW,EAChB,IAAI,CAAC,QAAQ,CAAC,OAAO,EACrB,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,KAAK,EAC3B,IAAI,CAAC,iBAAiB,EACtB,IAAI,CAAC,QAAQ,CAAC,OAAO,CACtB,CAAC;QAEF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC;QACnC,IAAI,CAAC,iBAAiB,GAAG,MAAM,CAAC,OAAO,CAAC;QACxC,OAAO,MAAM,CAAC,OAAO,CAAC;IACxB,CAAC;IAEM,sBAAsB,CAAC,KAAkB;QAC9C,MAAM,MAAM,GAAG,IAAI,CAAC,yBAAyB,CAC3C,KAAK,CAAC,OAAO,CAAC,MAAM,EACpB,KAAK,CAAC,MAAM,EACZ,IAAI,CAAC,WAAW,EAChB,IAAI,CAAC,KAAK,CAAC,OAAO,EAClB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,EACxB,IAAI,CAAC,kBAAkB,EACvB,IAAI,CAAC,KAAK,CAAC,OAAO,CACnB,CAAC;QAEF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC;QACnC,IAAI,CAAC,kBAAkB,GAAG,MAAM,CAAC,OAAO,CAAC;QACzC,OAAO,MAAM,CAAC,OAAO,CAAC;IACxB,CAAC;IAEM,WAAW,CAChB,QAAiB,EACjB,IAAsB,EACtB,IAAiB;QAEjB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;QAC3B,IAAI,CAAC,0BAA0B,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;IAClD,CAAC;IAMM,kBAAkB,CAAC,IAAa;QACrC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,gBAAgB,CAAC;QAG9C,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC,oBAAoB,CACpD,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,SAAS,CAAC,MAAM,EACrB,IAAI,CAAC,QAAQ,CAAC,OAAO,CACtB,CAAC;QAEF,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,GAAG,IAAI,CAAC,oBAAoB,CACjD,IAAI,CAAC,MAAM,EACX,IAAI,CAAC,SAAS,CAAC,GAAG,EAClB,IAAI,CAAC,KAAK,CAAC,OAAO,EAClB,IAAI,CAAC,KAAK,CAAC,OAAO,EAClB,IAAI,CACL,CAAC;QAEF,MAAM,SAAS,GAAG,GAAG,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,WAAW,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;QACrG,MAAM,MAAM,GAAG,GAAG,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,WAAW,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;QAEzF,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC;IAC5C,CAAC;IAEM,oBAAoB,CAAC,IAAiB;QAC3C,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,mBAAmB,CAAC,IAAI,CAAC,CAAC;QAEpD,MAAM,KAAK,GAAG,IAAI,CAAC,wBAAwB,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAC7D,MAAM,MAAM,GAAG,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;QAEjE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;IAC3B,CAAC;IAMM,sBAAsB,CAAC,KAAyB;QACrD,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;QAEvC,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;YACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC;YACpC,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC;YAElC,IAAI,QAAQ,GAAG,WAAW,EAAE,CAAC;gBAE3B,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;gBACjB,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC;gBAC5B,SAAS;YACX,CAAC;YAED,IAAI,QAAQ,GAAG,OAAO,GAAG,CAAC,GAAG,WAAW,EAAE,CAAC;gBACzC,IAAI,CAAC,OAAO,GAAG,WAAW,GAAG,QAAQ,GAAG,CAAC,CAAC;YAC5C,CAAC;QACH,CAAC;IACH,CAAC;IAEO,yBAAyB,CAC/B,WAAmB,EACnB,YAAoB,EACpB,SAAiB,EACjB,WAAqB,EACrB,UAAkB,EAClB,WAAmB,EACnB,OAAe;QAEf,MAAM,cAAc,GAAG,YAAY,GAAG,SAAS,CAAC;QAChD,IAAI,OAAO,GAAG,WAAW,CAAC;QAG1B,IAAI,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,OAAO,EAAE,CAAC;YACtC,OAAO,EAAE,OAAO,EAAE,WAAW,CAAC,UAAU,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAC;QACtE,CAAC;QAGD,IAAI,cAAc,KAAK,CAAC,IAAI,WAAW,EAAE,CAAC;YACxC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAC;QAC1D,CAAC;QAED,IAAI,WAAW,GAAG,CAAC,CAAC;QACpB,KAAK,IAAI,CAAC,GAAG,UAAU,GAAG,CAAC,EAAE,CAAC,GAAG,WAAW,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACzD,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC;YACpC,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,YAAY,CAAC;YACrD,MAAM,SAAS,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC;YAG5D,MAAM,aAAa,GACjB,WAAW,GAAG,YAAY,GAAG,IAAI,CAAC,GAAG,GAAG,SAAS,GAAG,CAAC,CAAC;YACxD,MAAM,aAAa,GAAG,WAAW,GAAG,SAAS,GAAG,CAAC,CAAC;YAClD,MAAM,QAAQ,GAAG,WAAW,GAAG,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC;YAEvD,IAAI,cAAc,GAAG,CAAC,EAAE,CAAC;gBAEvB,IACE,WAAW,IAAI,aAAa;oBAC5B,WAAW,IAAI,QAAQ,GAAG,SAAS,EACnC,CAAC;oBACD,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;gBACjC,CAAC;YACH,CAAC;iBAAM,IAAI,cAAc,GAAG,CAAC,EAAE,CAAC;gBAE9B,IAAI,WAAW,IAAI,aAAa,IAAI,WAAW,GAAG,WAAW,EAAE,CAAC;oBAC9D,OAAO,GAAG,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC;gBACnC,CAAC;YACH,CAAC;YAED,WAAW,IAAI,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC;QACzC,CAAC;QAED,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAC;IAC7C,CAAC;IAEO,oBAAoB,CAC1B,UAAkB,EAClB,YAA0B,EAC1B,KAAe,EACf,OAAO,GAAG,CAAC,EACX,aAAa,GAAG,KAAK;QAErB,IAAI,eAAe,GAAG,CAAC,CAAC;QACxB,IAAI,OAAO,GAAG,YAAY,CAAC,IAAI,CAAC;QAEhC,MAAM,eAAe,GAAG,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;QAC5D,MAAM,aAAa,GACjB,eAAe,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,GAAG,GAAG,CAAC,EAAE,CAAC,CAAC;YAC9C,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC;QAEhC,IAAI,UAAU,IAAI,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;YACtC,OAAO,CAAC,CAAC;QACX,CAAC;QAED,IAAI,UAAU,GAAG,aAAa,EAAE,CAAC;YAC/B,MAAM,aAAa,GAAG,UAAU,GAAG,aAAa,CAAC;YACjD,OAAO,IAAI,CAAC,uBAAuB,CACjC,aAAa,EACb,eAAe,CAAC,MAAM,EACtB,OAAO,EACP,aAAa,CACd,CAAC;QACJ,CAAC;QAED,KAAK,IAAI,CAAC,GAAG,YAAY,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAC3D,MAAM,WAAW,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;YAC7B,MAAM,QAAQ,GAAG,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,WAAW,CAAC;YAE7C,MAAM,YAAY,GAChB,eAAe,GAAG,WAAW,GAAG,IAAI,CAAC,GAAG,GAAG,QAAQ,GAAG,CAAC,CAAC;YAE1D,IAAI,UAAU,GAAG,YAAY,EAAE,CAAC;gBAC9B,OAAO,GAAG,CAAC,GAAG,CAAC,GAAG,YAAY,CAAC,KAAK,CAAC;YACvC,CAAC;iBAAM,CAAC;gBACN,MAAM;YACR,CAAC;YAED,eAAe,IAAI,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC;QAC5C,CAAC;QAED,OAAO,OAAO,CAAC;IACjB,CAAC;IAEO,SAAS,CAAC,IAAiB,EAAE,IAAsB;QACzD,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,mBAAmB,CAAC,IAAI,CAAC,CAAC;QAEzD,IAAI,CAAC,gBAAgB,GAAG,iBAAiB,CAAC,IAAI,CAAC,CAAC;QAChD,IAAI,CAAC,SAAS,GAAG,eAAe,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QAExD,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC;QAChB,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;QACxB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;QACrB,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;QACrB,IAAI,CAAC,iBAAiB,GAAG,CAAC,CAAC;QAC3B,IAAI,CAAC,kBAAkB,GAAG,CAAC,CAAC;IAC9B,CAAC;IAEO,0BAA0B,CAChC,IAAiB,EACjB,QAAiB;QAEjB,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC;YACpC,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;YAEvD,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,iBAAiB,CAClD,QAAQ,CAAC,IAAI,GAAG,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,UAAU,GAAG,OAAO,EAC1D,IAAI,CAAC,QAAQ,CAAC,OAAO,CACtB,CAAC;QACJ,CAAC;QAED,IAAI,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC,EAAE,CAAC;YACjC,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;YAErD,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,GAAG,IAAI,CAAC,iBAAiB,CAC/C,QAAQ,CAAC,GAAG,GAAG,MAAM,CAAC,OAAO,GAAG,OAAO,EACvC,IAAI,CAAC,KAAK,CAAC,OAAO,CACnB,CAAC;QACJ,CAAC;IACH,CAAC;IAEO,iBAAiB,CAAC,cAAsB,EAAE,KAAe;QAC/D,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC;QACrB,IAAI,eAAe,GAAG,CAAC,CAAC;QAExB,KAAK,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE,CAAC;YACxC,eAAe,IAAI,IAAI,GAAG,GAAG,CAAC;YAE9B,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,GAAG,CAAC,EAAE,CAAC;gBACnE,OAAO,CAAC,GAAG,CAAC,CAAC;YACf,CAAC;QACH,CAAC;QAED,OAAO,CAAC,CAAC;IACX,CAAC;IAEO,uBAAuB,CAC7B,aAAqB,EACrB,WAAmB,EACnB,OAAe,EACf,aAAsB;QAEtB,IAAI,aAAa,EAAE,CAAC;YAClB,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;YACvE,OAAO,WAAW,GAAG,cAAc,CAAC;QACtC,CAAC;QAED,OAAO,WAAW,CAAC;IACrB,CAAC;IAEO,wBAAwB,CAAC,OAAiB,EAAE,KAAK,GAAG,KAAK;QAC/D,MAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC;QAC3E,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC;QAExE,IAAI,eAAe,GAAG,CAAC,CAAC;QAExB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC;YAC9B,MAAM,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;YACjC,eAAe,IAAI,OAAO,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC;QAClD,CAAC;QAED,OAAO,eAAe,CAAC;IACzB,CAAC;IAEO,aAAa,CACnB,IAAiB,EACjB,IAA+B;QAE/B,MAAM,QAAQ,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC9C,MAAM,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;QAExC,OAAO,IAAI,KAAK,YAAY;YAC1B,CAAC,CAAC,QAAQ,CAAC,IAAI;gBACX,MAAM,CAAC,OAAO;gBACd,IAAI,CAAC,UAAU;gBACf,MAAM,CAAC,UAAU,CAAC,QAAQ,CAAC,WAAW,CAAC;YAC3C,CAAC,CAAC,QAAQ,CAAC,GAAG,GAAG,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;IAC7E,CAAC;CACF;AAED,MAAM,UAAU,qBAAqB;IACnC,OAAO,IAAI,eAAe,EAAE,CAAC;AAC/B,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,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAEvD,KAAK,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;IAC5B,KAAK,CAAC,YAAY,CAAC,oBAAoB,EAAE,EAAE,CAAC,CAAC;IAC7C,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC;IACnB,KAAK,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;IAEpB,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE;QACzB,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,GAAG,QAAQ,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,EAAE;QAC/D,MAAM,EAAE,aAAa,QAAQ,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,EAAE;QACxE,YAAY,EAAE,QAAQ,CAAC,gBAAgB,CAAC,iBAAiB,CAAC;QAC1D,SAAS,EAAE,GAAG,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,EAAE;QAC7D,MAAM,EAAE,IAAI;QACZ,kBAAkB,EAAE,oBAAoB;KACzC,CAAC,CAAC;IAEH,OAAO,KAAK,CAAC;AACf,CAAC;AAED,MAAM,UAAU,eAAe;IAC7B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAE9C,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE;QAC3B,QAAQ,EAAE,UAAU;QACpB,OAAO,EAAE,QAAQ;QACjB,GAAG,EAAE,CAAC;QACN,IAAI,EAAE,CAAC;QACP,MAAM,EAAE,IAAI;QACZ,UAAU,EAAE,+BAA+B;QAC3C,MAAM,EAAE,+BAA+B;QACvC,YAAY,EAAE,sBAAsB;QACpC,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;KACf,CAAC,CAAC;IAEH,OAAO,OAAO,CAAC;AACjB,CAAC","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"]}