igniteui-webcomponents 5.3.0-beta.2 → 5.3.0

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":"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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"]}
+{"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 { 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 IgcTileComponent from './tile.js';\n\n/**\n * The tile manager component enables the dynamic arrangement, resizing, and interaction of tiles.\n *\n * @element igc-tile-manager\n *\n * @slot - Default slot for the tile manager. Only `igc-tile` elements will be projected inside the CSS grid container.\n *\n * @csspart base - The tile manager CSS Grid container.\n *\n * @cssproperty --column-count - The number of columns for the tile manager. The `column-count` attribute sets this variable.\n * @cssproperty --min-col-width - The minimum size of the columns in the tile-manager. The `min-column-width` attribute sets this variable.\n * @cssproperty --min-row-height - The minimum size of the rows in the tile-manager. The `min-row-height` attribute sets this variable.\n * @cssproperty --grid-gap - The gap size of the underlying CSS grid container. The `gap` attributes sts this variable.\n *\n */\n@themes(all)\nexport default class IgcTileManagerComponent extends LitElement {\n  public static readonly tagName = 'igc-tile-manager';\n  public static override styles = [styles, shared];\n\n  public static override 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      '--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      '--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      '--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 between tiles in 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      '--grid-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],\n      config: {\n        childList: true,\n      },\n    });\n  }\n\n  protected override updated() {\n    this._tilesState.adjustTileGridPosition();\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  // #endregion\n\n  // #region Public API\n\n  /**\n   * Returns the properties of the current tile collections as a JSON payload.\n   *\n   * @remarks\n   * The content of the tiles is not serialized or saved. Only tile properties\n   * are serialized.\n   */\n  public saveLayout(): string {\n    return this._serializer.saveAsJSON();\n  }\n\n  /**\n   * Restores a previously serialized state produced by `saveLayout`.\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      >\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.d.ts

@@ -1,18 +1,19 @@
 import { LitElement } from 'lit';
 import type { Constructor } from '../common/mixins/constructor.js';
 import IgcResizeContainerComponent from '../resize-container/resize-container.js';
-type IgcTileChangeState = {
+export type IgcTileChangeStateEventArgs = {
     tile: IgcTileComponent;
     state: boolean;
 };
 export interface IgcTileComponentEventMap {
-    igcTileFullscreen: CustomEvent<IgcTileChangeState>;
-    igcTileMaximize: CustomEvent<IgcTileChangeState>;
-    tileDragStart: CustomEvent<IgcTileComponent>;
-    tileDragEnd: CustomEvent<IgcTileComponent>;
-    igcResizeStart: CustomEvent<IgcTileComponent>;
-    igcResizeMove: CustomEvent<IgcTileComponent>;
-    igcResizeEnd: CustomEvent<IgcTileComponent>;
+    igcTileFullscreen: CustomEvent<IgcTileChangeStateEventArgs>;
+    igcTileMaximize: CustomEvent<IgcTileChangeStateEventArgs>;
+    igcTileDragStart: CustomEvent<IgcTileComponent>;
+    igcTileDragEnd: CustomEvent<IgcTileComponent>;
+    igcTileDragCancel: CustomEvent<IgcTileComponent>;
+    igcTileResizeStart: CustomEvent<IgcTileComponent>;
+    igcTileResizeEnd: CustomEvent<IgcTileComponent>;
+    igcTileResizeCancel: CustomEvent<IgcTileComponent>;
 }
 declare const IgcTileComponent_base: Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcTileComponentEventMap>> & Constructor<LitElement>;
 /**
@@ -21,29 +22,32 @@ declare const IgcTileComponent_base: Constructor<import("../common/mixins/event-
  *
  * @element igc-tile
  *
- * @fires igcTileFullscreen - Fired when tile fullscreen state changes.
- * @fires igcTileMaximize - Fired when tile maximize state changes.
- * @fires igcResizeStart - Fired when tile begins resizing.
- * @fires igcResizeMove - Fired when tile is being resized.
- * @fires igcResizeEnd - Fired when tile finishes resizing.
+ * @fires igcTileFullscreen - Fired when tile the fullscreen state changes.
+ * @fires igcTileMaximize - Fired when tile the maximize state changes.
+ * @fires igcTileDragStart - Fired when a drag operation on a tile is about to begin. Cancelable.
+ * @fires igcTileDragEnd - Fired when a drag operation with a tile is successfully completed.
+ * @fires igcTileDragCancel - Fired when a tile drag operation is canceled by the user.
+ * @fires igcTileResizeStart - Fired when a resize operation on a tile is about to begin. Cancelable.
+ * @fires igcTileResizeEnd - Fired when a resize operation on a tile is successfully completed.
+ * @fires igcTileResizeCancel - Fired when a resize operation on a tile is canceled by the user.
  *
+ * @slot - Default slot for the tile's content.
  * @slot title - Renders the title of the tile header.
- * @slot maximize-action - Renders the maximize action element.
- * @slot fullscreen-action - Renders the fullscreen action element.
- * @slot actions - Renders items after the default actions.
- * @slot Default slot for the tile's content.
- * @slot side-adorner - Renders the side resize handle.
- * @slot corner-adorner - Renders the corner resize handle.
- * @slot bottom-adorner - Renders the bottom resize handle.
+ * @slot maximize-action - Renders the maximize action element of the tile header.
+ * @slot fullscreen-action - Renders the fullscreen action element of the tile header.
+ * @slot actions - Renders items after the default actions in the tile header.
+ * @slot side-adorner - Renders the side resize handle of the tile.
+ * @slot corner-adorner - Renders the corner resize handle of the tile.
+ * @slot bottom-adorner - Renders the bottom resize handle of the tile.
  *
- * @csspart base - The wrapper for the entire tile.
- * @csspart header - The container for the header, including title and actions.
- * @csspart title - The title container.
- * @csspart actions - The actions container.
+ * @csspart base - The wrapper for the entire tile content, header and content.
+ * @csspart header - The container for the tile header, including title and actions.
+ * @csspart title - The title container of the tile.
+ * @csspart actions - The actions container of the tile header.
  * @csspart content-container - The container wrapping the tile’s main content.
- * @csspart trigger-side - The part for the side adorner of the encapsulated resize element.
- * @csspart trigger - The part for the corner adorner of the encapsulated resize element.
- * @csspart trigger-bottom - The part for the bottom adorner of the encapsulated resize element.
+ * @csspart trigger-side - The part for the side adorner of the encapsulated resize element in the tile.
+ * @csspart trigger - The part for the corner adorner of the encapsulated resize element in the tile.
+ * @csspart trigger-bottom - The part for the bottom adorner of the encapsulated resize element in the tile.
  */
 export default class IgcTileComponent extends IgcTileComponent_base {
     static readonly tagName = "igc-tile";
@@ -73,7 +77,7 @@ export default class IgcTileComponent extends IgcTileComponent_base {
     private get _cssContainer();
     /** Returns the tile manager current resize mode. */
     private get _resizeMode();
-    protected _headerRef: import("lit-html/directives/ref.js").Ref<HTMLSlotElement>;
+    protected _headerRef: import("lit-html/directives/ref.js").Ref<HTMLElement>;
     private _titleElements;
     private _actionsElements;
     protected _resizeContainer?: IgcResizeContainerComponent;
@@ -83,18 +87,15 @@ export default class IgcTileComponent extends IgcTileComponent_base {
     private _isResizing;
     /** Whether to render the resize container based on tile and tile manager configuration. */
     private get _resizeDisabled();
-    /**
-     * The unique identifier of the tile.
-     * @attr tile-id
-     */
-    tileId: string | null;
     /**
      * The number of columns the tile will span.
      *
      * @remarks
-     * Values <= 1 will be coerced to 1.
+     * When setting a value that is less than 1, it will be
+     * coerced to 1.
      *
      * @attr col-span
+     * @default 1
      */
     set colSpan(value: number);
     get colSpan(): number;
@@ -102,9 +103,11 @@ export default class IgcTileComponent extends IgcTileComponent_base {
      * The number of rows the tile will span.
      *
      * @remarks
-     * Values <= 1 will be coerced to 1.
+     * When setting a value that is less than 1, it will be
+     * coerced to 1.
      *
      * @attr row-span
+     * @default 1
      */
     set rowSpan(value: number);
     get rowSpan(): number;
@@ -136,24 +139,32 @@ export default class IgcTileComponent extends IgcTileComponent_base {
     set maximized(value: boolean);
     get maximized(): boolean;
     /**
-     * Indicates whether the tile can be resized.
+     * Indicates whether to disable tile resize behavior regardless
+     * ot its tile manager parent settings.
+     *
      * @attr disable-resize
+     * @default false
      */
     disableResize: boolean;
     /**
-     * Indicates whether the fullscreen action is displayed.
+     * Whether to disable the rendering of the tile `fullscreen-action` slot and its
+     * default fullscreen action button.
+     *
      * @attr disable-fullscreen
+     * @default false
      */
     disableFullscreen: boolean;
     /**
-     * Indicates whether the maximize action is displayed.
+     * Whether to disable the rendering of the tile `maximize-action` slot and its
+     * default maximize action button.
+     *
      * @attr disable-maximize
+     * @default false
      */
     disableMaximize: boolean;
     /**
      * Gets/sets the tile's visual position in the layout.
-     *
-     * Corresponds to the CSS order property.
+     * Corresponds to the CSS `order` property.
      *
      * @attr position
      */
@@ -164,12 +175,13 @@ export default class IgcTileComponent extends IgcTileComponent_base {
     protected createRenderRoot(): HTMLElement | DocumentFragment;
     private _setDragState;
     private _handleDragStart;
-    private _handleDragMove;
+    private _handleDragOver;
     private _handleDragCancel;
     private _handleDragEnd;
     private _skipDrag;
     private _match;
     private _createDragGhost;
+    private _createResizeGhost;
     private _setResizeState;
     private _handleResizeStart;
     private _handleResize;
@@ -177,8 +189,10 @@ export default class IgcTileComponent extends IgcTileComponent_base {
     private _handleResizeCancel;
     private _handleFullscreen;
     private _handleMaximize;
-    private emitFullScreenEvent;
-    private emitMaximizedEvent;
+    private _emitFullScreenEvent;
+    private _emitMaximizedEvent;
+    private _emitTileDragStart;
+    private _emitTileResizeStart;
     protected _renderDefaultAction(type: 'maximize' | 'fullscreen'): import("lit-html").TemplateResult<1>;
     protected _renderHeader(): import("lit-html").TemplateResult<1>;
     protected _renderContent(): import("lit-html").TemplateResult<1>;

package/components/tile-manager/tile.js

@@ -8,7 +8,6 @@ var IgcTileComponent_1;
 import { LitElement, html, nothing } from 'lit';
 import { property, query, queryAssignedElements, state, } from 'lit/decorators.js';
 import { createRef, ref } from 'lit/directives/ref.js';
-import { styleMap } from 'lit/directives/style-map.js';
 import { startViewTransition } from '../../animations/player.js';
 import { themes } from '../../theming/theming-decorator.js';
 import IgcIconButtonComponent from '../button/icon-button.js';
@@ -22,24 +21,26 @@ import { asNumber, createCounter, findElementFromEventPath, getCenterPoint, isEm
 import IgcDividerComponent from '../divider/divider.js';
 import IgcResizeContainerComponent from '../resize-container/resize-container.js';
 import { createTileDragStack, swapTiles } from './position.js';
+import { createTileResizeState } from './resize-state.js';
 import { styles as shared } from './themes/shared/tile/tile.common.css.js';
 import { styles } from './themes/tile.base.css.js';
 import { all } from './themes/tile.js';
-import { createTileDragGhost, createTileGhost, createTileResizeState, } from './tile-util.js';
+import { createTileDragGhost, createTileGhost } from './tile-ghost-util.js';
 let IgcTileComponent = IgcTileComponent_1 = class IgcTileComponent extends EventEmitterMixin(LitElement) {
     constructor() {
         super(...arguments);
         this._dragController = addDragController(this, {
             skip: this._skipDrag,
+            matchTarget: this._match,
             ghost: this._createDragGhost,
             start: this._handleDragStart,
-            move: this._handleDragMove,
+            over: this._handleDragOver,
             end: this._handleDragEnd,
             cancel: this._handleDragCancel,
         });
         this._fullscreenController = addFullscreenController(this, {
-            enter: this.emitFullScreenEvent,
-            exit: this.emitFullScreenEvent,
+            enter: this._emitFullScreenEvent,
+            exit: this._emitFullScreenEvent,
         });
         this._colSpan = 1;
         this._rowSpan = 1;
@@ -64,10 +65,12 @@ let IgcTileComponent = IgcTileComponent_1 = class IgcTileComponent extends Event
         this._maximized = false;
         this._isDragging = false;
         this._isResizing = false;
-        this.tileId = null;
         this.disableResize = false;
         this.disableFullscreen = false;
         this.disableMaximize = false;
+        this._createResizeGhost = () => {
+            return createTileGhost(this);
+        };
     }
     static register() {
         registerComponent(IgcTileComponent_1, IgcIconButtonComponent, IgcDividerComponent, IgcResizeContainerComponent);
@@ -139,9 +142,9 @@ let IgcTileComponent = IgcTileComponent_1 = class IgcTileComponent extends Event
     }
     connectedCallback() {
         super.connectedCallback();
-        this.tileId = this.tileId || `tile-${IgcTileComponent_1.increment()}`;
+        this.id = this.id || `tile-${IgcTileComponent_1.increment()}`;
         this.style.viewTransitionName =
-            this.style.viewTransitionName || `tile-transition-${this.tileId}`;
+            this.style.viewTransitionName || `tile-transition-${this.id}`;
     }
     createRenderRoot() {
         const root = super.createRenderRoot();
@@ -150,22 +153,21 @@ let IgcTileComponent = IgcTileComponent_1 = class IgcTileComponent extends Event
     }
     _setDragState(state = true) {
         this._isDragging = state;
-        this._tileContent.style.opacity = state ? '0' : '1';
+        this._tileContent.style.opacity = state ? '0' : '';
         this.style.pointerEvents = state ? 'none' : '';
         this.part.toggle('dragging', state);
     }
     _handleDragStart() {
-        this.emitEvent('tileDragStart', { detail: this });
+        if (!this._emitTileDragStart()) {
+            return false;
+        }
         this._setDragState();
         this._dragStack.push(this);
+        return true;
     }
-    _handleDragMove({ event: { clientX, clientY }, }) {
-        const match = document
-            .elementsFromPoint(clientX, clientY)
-            .find(this._match);
-        if (!match) {
-            return;
-        }
+    _handleDragOver(parameters) {
+        const match = parameters.state.element;
+        const { clientX, clientY } = parameters.event;
         if (this._dragStack.peek() === match) {
             const { x, y } = getCenterPoint(match);
             const shouldSwap = this.position <= match.position
@@ -192,11 +194,12 @@ let IgcTileComponent = IgcTileComponent_1 = class IgcTileComponent extends Event
         });
         this._dragController.dispose();
         this._setDragState(false);
+        this.emitEvent('igcTileDragCancel', { detail: this });
     }
     _handleDragEnd() {
-        this.emitEvent('tileDragEnd', { detail: this });
         this._setDragState(false);
         this._dragStack.reset();
+        this.emitEvent('igcTileDragEnd', { detail: this });
     }
     _skipDrag(event) {
         if (this._maximized || this.fullscreen) {
@@ -215,8 +218,12 @@ let IgcTileComponent = IgcTileComponent_1 = class IgcTileComponent extends Event
         this.style.zIndex = state ? '1' : '';
         this.part.toggle('resizing', state);
     }
-    _handleResizeStart({ detail: { state }, }) {
-        this._resizeState.updateState(state.initial, this, this._cssContainer);
+    _handleResizeStart(event) {
+        if (!this._emitTileResizeStart()) {
+            event.preventDefault();
+            return;
+        }
+        this._resizeState.updateState(event.detail.state.initial, this, this._cssContainer);
         this._setResizeState();
     }
     _handleResize({ detail: { state }, }) {
@@ -230,47 +237,55 @@ let IgcTileComponent = IgcTileComponent_1 = class IgcTileComponent extends Event
             state.current.height = this._resizeState.calculateSnappedHeight(state);
         }
     }
-    async _handleResizeEnd({ detail: { state }, }) {
-        const { column, row } = this._resizeState.getResizedPosition(state.current);
-        const { transition } = startViewTransition(() => {
-            this.style.setProperty('grid-row', row);
-            this.style.setProperty('grid-column', column);
-        });
-        await transition?.updateCallbackDone;
-        const { width, height } = this._resizeState.calculateResizedSize(this._cssContainer);
-        this._resizeState.resizedDimensions = { width, height };
-        this._resizeContainer?.setSize(width, height);
-        this._setResizeState(false);
+    _handleResizeEnd({ detail: { state }, }) {
+        const { colSpan, rowSpan } = this._resizeState.calculateResizedGridPosition(state.current);
+        state.commit = async () => {
+            await startViewTransition(() => {
+                this.colSpan = colSpan;
+                this.rowSpan = rowSpan;
+            }).transition?.updateCallbackDone;
+            this._setResizeState(false);
+            this.emitEvent('igcTileResizeEnd', { detail: this });
+        };
     }
     _handleResizeCancel() {
         this._setResizeState(false);
+        this.emitEvent('igcTileResizeCancel', { detail: this });
     }
     _handleFullscreen() {
-        const { width, height } = !this.fullscreen
-            ? this._resizeState.emptyResizeDimensions
-            : this._resizeState.resizedDimensions;
-        this._resizeContainer?.setSize(width, height);
         this._fullscreenController.setState(!this.fullscreen);
     }
     _handleMaximize() {
-        if (!this.emitMaximizedEvent()) {
+        if (!this._emitMaximizedEvent()) {
             return;
         }
         this.maximized = !this.maximized;
     }
-    emitFullScreenEvent(state) {
+    _emitFullScreenEvent(state) {
         this.requestUpdate();
         return this.emitEvent('igcTileFullscreen', {
             detail: { tile: this, state },
             cancelable: true,
         });
     }
-    emitMaximizedEvent() {
+    _emitMaximizedEvent() {
         return this.emitEvent('igcTileMaximize', {
             detail: { tile: this, state: !this.maximized },
             cancelable: true,
         });
     }
+    _emitTileDragStart() {
+        return this.emitEvent('igcTileDragStart', {
+            detail: this,
+            cancelable: true,
+        });
+    }
+    _emitTileResizeStart() {
+        return this.emitEvent('igcTileResizeStart', {
+            detail: this,
+            cancelable: true,
+        });
+    }
     _renderDefaultAction(type) {
         const [icon, listener] = type === 'fullscreen'
             ? [
@@ -297,21 +312,27 @@ let IgcTileComponent = IgcTileComponent_1 = class IgcTileComponent extends Event
             isEmpty(this._actionsElements) &&
             this.disableMaximize &&
             this.disableFullscreen;
+        const hasMaximizeSlot = !(this.disableMaximize || this.fullscreen);
+        const hasFullscreenSlot = !this.disableFullscreen;
         return html `
-      <section part="header" ?hidden=${hideHeader}>
-        <header part="title" ${ref(this._headerRef)}>
+      <section part="header" ?hidden=${hideHeader} ${ref(this._headerRef)}>
+        <header part="title">
           <slot name="title"></slot>
         </header>
         <section id="tile-actions" part="actions">
-          ${!this.disableMaximize
-            ? html `<slot name="maximize-action"
-                >${this._renderDefaultAction('maximize')}</slot
-              >`
+          ${hasMaximizeSlot
+            ? html `
+                <slot name="maximize-action">
+                  ${this._renderDefaultAction('maximize')}
+                </slot>
+              `
             : nothing}
-          ${!this.disableFullscreen
-            ? html `<slot name="fullscreen-action"
-                >${this._renderDefaultAction('fullscreen')}</slot
-              >`
+          ${hasFullscreenSlot
+            ? html `
+                <slot name="fullscreen-action">
+                  ${this._renderDefaultAction('fullscreen')}
+                </slot>
+              `
             : nothing}
 
           <slot name="actions"></slot>
@@ -330,14 +351,8 @@ let IgcTileComponent = IgcTileComponent_1 = class IgcTileComponent extends Event
             resizing: this._isResizing,
             maximized: this.maximized,
         });
-        const styles = {
-            '--ig-col-span': this._colSpan,
-            '--ig-row-span': this._rowSpan,
-            '--ig-col-start': this._colStart,
-            '--ig-row-start': this._rowStart,
-        };
         return html `
-      <div part=${parts} style=${styleMap(styles)}>
+      <div part=${parts}>
         ${this._renderHeader()}
         <div part="content-container">
           <slot></slot>
@@ -356,33 +371,31 @@ let IgcTileComponent = IgcTileComponent_1 = class IgcTileComponent extends Event
     `;
     }
     render() {
-        const { width, height } = this.fullscreen || this.maximized
-            ? this._resizeState.emptyResizeDimensions
-            : this._resizeState.resizedDimensions;
-        this._resizeContainer?.setSize(width, height);
-        return html `
-      <igc-resize
-        part=${partNameMap({
-            resize: true,
-            'side-adorner': this._customAdorners.get('side'),
-            'corner-adorner': this._customAdorners.get('corner'),
-            'bottom-adorner': this._customAdorners.get('bottom'),
-        })}
-        exportparts="trigger-side, trigger, trigger-bottom"
-        mode="deferred"
-        .enabled=${!this._resizeDisabled}
-        ?active=${this._resizeMode === 'always'}
-        .ghostFactory=${createTileGhost}
-        @igcResizeStart=${this._handleResizeStart}
-        @igcResize=${this._handleResize}
-        @igcResizeEnd=${this._handleResizeEnd}
-        @igcResizeCancel=${this._handleResizeCancel}
-      >
-        ${this._renderContent()} ${this._renderAdornerSlot('side')}
-        ${this._renderAdornerSlot('corner')}
-        ${this._renderAdornerSlot('bottom')}
-      </igc-resize>
-    `;
+        const isActive = this._resizeMode === 'always';
+        return this._resizeDisabled
+            ? this._renderContent()
+            : html `
+          <igc-resize
+            part=${partNameMap({
+                resize: true,
+                'side-adorner': this._customAdorners.get('side'),
+                'corner-adorner': this._customAdorners.get('corner'),
+                'bottom-adorner': this._customAdorners.get('bottom'),
+            })}
+            exportparts="trigger-side, trigger, trigger-bottom"
+            mode="deferred"
+            ?active=${isActive}
+            .ghostFactory=${this._createResizeGhost}
+            @igcResizeStart=${this._handleResizeStart}
+            @igcResize=${this._handleResize}
+            @igcResizeEnd=${this._handleResizeEnd}
+            @igcResizeCancel=${this._handleResizeCancel}
+          >
+            ${this._renderContent()} ${this._renderAdornerSlot('side')}
+            ${this._renderAdornerSlot('corner')}
+            ${this._renderAdornerSlot('bottom')}
+          </igc-resize>
+        `;
     }
 };
 IgcTileComponent.tagName = 'igc-tile';
@@ -409,9 +422,6 @@ __decorate([
 __decorate([
     state()
 ], IgcTileComponent.prototype, "_isResizing", void 0);
-__decorate([
-    property({ attribute: 'tile-id', type: String, reflect: true })
-], IgcTileComponent.prototype, "tileId", void 0);
 __decorate([
     property({ type: Number, attribute: 'col-span' })
 ], IgcTileComponent.prototype, "colSpan", null);