igniteui-webcomponents 7.3.0 → 7.3.2

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

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 var IgcTileManagerComponent_1;
 import { html, LitElement } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { tileManagerContext, } from '#internals/context.js';
@@ -31,11 +31,11 @@ let IgcTileManagerComponent = class IgcTileManagerComponent extends LitElement {
     static register() {
         registerComponent(IgcTileManagerComponent_1, IgcTileComponent);
     }
-    static _styleVariable(name) {
+    static _styleVariable(name, transform = (value) => (value ?? undefined)) {
         return {
-            transform: ({ value }) => value ?? undefined,
+            transform: ({ value }) => transform(value),
             onChange: ({ value, host }) => {
-                Object.assign(host._internalStyles, { [name]: value });
+                Object.assign(host._internalStyles, { [name]: value || undefined });
             },
         };
     }
@@ -45,6 +45,7 @@ let IgcTileManagerComponent = class IgcTileManagerComponent extends LitElement {
     constructor() {
         super();
         this._internalStyles = {};
+        this._hasMaximizedTile = false;
         this._serializer = createSerializer(this);
         this._tilesState = createTilesState(this);
         this._grid = createRef();
@@ -73,29 +74,37 @@ let IgcTileManagerComponent = class IgcTileManagerComponent extends LitElement {
             },
         });
     }
-    updated() {
-        this._tilesState.adjustTileGridPosition();
+    updated(changed) {
+        if (changed.has('columnCount')) {
+            this._tilesState.adjustTileGridPosition();
+        }
     }
     firstUpdated() {
         this._tilesState.assignPositions();
         this._tilesState.assignTiles();
+        this._updateMaximizedTile();
         this._context.publish();
     }
+    _updateMaximizedTile() {
+        this._hasMaximizedTile = this.tiles.some((tile) => tile.maximized);
+    }
     _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);
+        const isOwn = ({ target }) => target.closest(this.tagName) === this;
+        for (const { node } of removed.filter(isOwn)) {
+            this._tilesState.remove(node);
         }
-        for (const added of ownAdded) {
-            this._tilesState.add(added.node);
+        for (const { node } of added.filter(isOwn)) {
+            this._tilesState.add(node);
         }
         this._tilesState.assignTiles();
+        this._tilesState.adjustTileGridPosition();
+        this._updateMaximizedTile();
     }
     _setMaximizedState() {
         const grid = this._grid.value;
+        this._updateMaximizedTile();
         if (grid) {
-            if (this.tiles.some((tile) => tile.maximized)) {
+            if (this._hasMaximizedTile) {
                 if (!grid.style.minHeight) {
                     grid.style.minHeight = `${grid.offsetHeight}px`;
                 }
@@ -104,7 +113,6 @@ let IgcTileManagerComponent = class IgcTileManagerComponent extends LitElement {
                 grid.style.minHeight = '';
             }
         }
-        this.requestUpdate();
     }
     saveLayout() {
         return this._serializer.saveAsJSON();
@@ -115,7 +123,7 @@ let IgcTileManagerComponent = class IgcTileManagerComponent extends LitElement {
     render() {
         const parts = {
             base: true,
-            'maximized-tile': this.tiles.some((tile) => tile.maximized),
+            'maximized-tile': this._hasMaximizedTile,
         };
         return html `
       <div
@@ -128,6 +136,9 @@ let IgcTileManagerComponent = class IgcTileManagerComponent extends LitElement {
     `;
     }
 };
+__decorate([
+    state()
+], IgcTileManagerComponent.prototype, "_hasMaximizedTile", void 0);
 __decorate([
     property({ attribute: 'resize-mode' })
 ], IgcTileManagerComponent.prototype, "resizeMode", void 0);
@@ -136,14 +147,7 @@ __decorate([
 ], IgcTileManagerComponent.prototype, "dragMode", void 0);
 __decorate([
     property({ type: Number, attribute: 'column-count' }),
-    coercedProperty({
-        transform: ({ value }) => Math.max(0, asNumber(value)),
-        onChange: ({ value, host }) => {
-            Object.assign(host._internalStyles, {
-                '--column-count': value || undefined,
-            });
-        },
-    })
+    coercedProperty(IgcTileManagerComponent._styleVariable('--column-count', (value) => Math.max(0, asNumber(value))))
 ], IgcTileManagerComponent.prototype, "columnCount", void 0);
 __decorate([
     property({ attribute: 'min-column-width' }),

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 { html, LitElement } 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 {\n  type TileManagerContext,\n  tileManagerContext,\n} from '#internals/context.js';\nimport { addContextProvider } from '#internals/controllers/context-provider.js';\nimport {\n  createMutationController,\n  type MutationControllerParams,\n} from '#internals/controllers/mutation-observer.js';\nimport {\n  coercedProperty,\n  type CoercedPropertyConfig,\n} from '#internals/decorators/coerced-property.js';\nimport { shadowOptions } from '#internals/decorators/shadow-options.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport { partMap } from '#internals/part-map.js';\nimport { asNumber } from '#internals/utils/math.js';\nimport { addThemingController } from '#theming/theming-controller.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/* blazorAdditionalDependency: IgcTileComponent */\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 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@shadowOptions({ slotAssignment: 'manual' })\nexport default class IgcTileManagerComponent extends LitElement {\n  public static readonly tagName = 'igc-tile-manager';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcTileManagerComponent, IgcTileComponent);\n  }\n\n  // #region Internal state\n\n  private _internalStyles: StyleInfo = {};\n\n  /** Shared config for the properties that project into a grid CSS variable. */\n  private static _styleVariable(\n    name: string\n  ): CoercedPropertyConfig<string | undefined, IgcTileManagerComponent> {\n    return {\n      transform: ({ value }) => value ?? undefined,\n      onChange: ({ value, host }) => {\n        Object.assign(host._internalStyles, { [name]: value });\n      },\n    };\n  }\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 readonly _managerContext: TileManagerContext = {\n    instance: this,\n    grid: this._grid,\n    setMaximizedState: () => this._setMaximizedState(),\n  };\n\n  private readonly _context = addContextProvider(this, {\n    context: tileManagerContext,\n    watch: ['dragMode', 'resizeMode'],\n    value: () => this._managerContext,\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 resizeMode: TileManagerResizeMode = 'none';\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 dragMode: TileManagerDragMode = 'none';\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  @coercedProperty<number, IgcTileManagerComponent>({\n    transform: ({ value }) => Math.max(0, asNumber(value)),\n    onChange: ({ value, host }) => {\n      Object.assign(host._internalStyles, {\n        '--column-count': value || undefined,\n      });\n    },\n  })\n  public columnCount = 0;\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  @coercedProperty(IgcTileManagerComponent._styleVariable('--min-col-width'))\n  public minColumnWidth?: string = undefined;\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  @coercedProperty(IgcTileManagerComponent._styleVariable('--min-row-height'))\n  public minRowHeight?: string = undefined;\n\n  /**\n   * Sets the gap size between tiles in the tile manager.\n   *\n   * @attr gap\n   */\n  @property()\n  @coercedProperty(IgcTileManagerComponent._styleVariable('--grid-gap'))\n  public gap?: string = undefined;\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    addThemingController(this, all);\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._context.publish();\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   * Locks/unlocks the grid container height in response to a tile's maximized state changing.\n   *\n   * @remarks\n   * Maximizing a tile removes it from the grid flow (absolute positioning), so it no longer\n   * contributes to the grid's intrinsic height. When that tile is the sole contributor to the\n   * tallest row track, the container would otherwise collapse to the remaining tiles and cut off\n   * the maximized tile's content. Capturing the current height before the layout change keeps the\n   * container stable, and it is released once no tile remains maximized.\n   */\n  private _setMaximizedState(): void {\n    const grid = this._grid.value;\n\n    if (grid) {\n      if (this.tiles.some((tile) => tile.maximized)) {\n        if (!grid.style.minHeight) {\n          grid.style.minHeight = `${grid.offsetHeight}px`;\n        }\n      } else {\n        grid.style.minHeight = '';\n      }\n    }\n\n    this.requestUpdate();\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 = {\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=${partMap(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"]}
+{"version":3,"file":"tile-manager.js","sourceRoot":"","sources":["../../../src/components/tile-manager/tile-manager.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, type PropertyValues } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { createRef, ref } from 'lit/directives/ref.js';\nimport { type StyleInfo, styleMap } from 'lit/directives/style-map.js';\nimport {\n  type TileManagerContext,\n  tileManagerContext,\n} from '#internals/context.js';\nimport { addContextProvider } from '#internals/controllers/context-provider.js';\nimport {\n  createMutationController,\n  type MutationControllerParams,\n} from '#internals/controllers/mutation-observer.js';\nimport {\n  coercedProperty,\n  type CoercedPropertyConfig,\n} from '#internals/decorators/coerced-property.js';\nimport { shadowOptions } from '#internals/decorators/shadow-options.js';\nimport { registerComponent } from '#internals/definitions/register.js';\nimport { partMap } from '#internals/part-map.js';\nimport { asNumber } from '#internals/utils/math.js';\nimport { addThemingController } from '#theming/theming-controller.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/* blazorAdditionalDependency: IgcTileComponent */\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 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@shadowOptions({ slotAssignment: 'manual' })\nexport default class IgcTileManagerComponent extends LitElement {\n  public static readonly tagName = 'igc-tile-manager';\n  public static override styles = [styles, shared];\n\n  /* blazorSuppress */\n  public static register() {\n    registerComponent(IgcTileManagerComponent, IgcTileComponent);\n  }\n\n  // #region Internal state\n\n  private _internalStyles: StyleInfo = {};\n\n  /** Whether any of the tiles is currently in a maximized state. */\n  @state()\n  private _hasMaximizedTile = false;\n\n  /** Shared config for the properties that project into a grid CSS variable. */\n  private static _styleVariable<T = string | undefined>(\n    name: string,\n    transform: (value: T) => T = (value) => (value ?? undefined) as T\n  ): CoercedPropertyConfig<T, IgcTileManagerComponent> {\n    return {\n      transform: ({ value }) => transform(value),\n      onChange: ({ value, host }) => {\n        Object.assign(host._internalStyles, { [name]: value || undefined });\n      },\n    };\n  }\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 readonly _managerContext: TileManagerContext = {\n    instance: this,\n    grid: this._grid,\n    setMaximizedState: () => this._setMaximizedState(),\n  };\n\n  private readonly _context = addContextProvider(this, {\n    context: tileManagerContext,\n    watch: ['dragMode', 'resizeMode'],\n    value: () => this._managerContext,\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 resizeMode: TileManagerResizeMode = 'none';\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 dragMode: TileManagerDragMode = 'none';\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  @coercedProperty(\n    IgcTileManagerComponent._styleVariable<number>('--column-count', (value) =>\n      Math.max(0, asNumber(value))\n    )\n  )\n  public columnCount = 0;\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  @coercedProperty(IgcTileManagerComponent._styleVariable('--min-col-width'))\n  public minColumnWidth?: string = undefined;\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  @coercedProperty(IgcTileManagerComponent._styleVariable('--min-row-height'))\n  public minRowHeight?: string = undefined;\n\n  /**\n   * Sets the gap size between tiles in the tile manager.\n   *\n   * @attr gap\n   */\n  @property()\n  @coercedProperty(IgcTileManagerComponent._styleVariable('--grid-gap'))\n  public gap?: string = undefined;\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    addThemingController(this, all);\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(changed: PropertyValues<this>) {\n    if (changed.has('columnCount')) {\n      this._tilesState.adjustTileGridPosition();\n    }\n  }\n\n  protected override firstUpdated() {\n    this._tilesState.assignPositions();\n    this._tilesState.assignTiles();\n    this._updateMaximizedTile();\n    this._context.publish();\n  }\n\n  private _updateMaximizedTile(): void {\n    this._hasMaximizedTile = this.tiles.some((tile) => tile.maximized);\n  }\n\n  private _observerCallback({\n    changes: { added, removed },\n  }: MutationControllerParams<IgcTileComponent>) {\n    const isOwn = ({ target }: { target: Element }) =>\n      target.closest(this.tagName) === this;\n\n    for (const { node } of removed.filter(isOwn)) {\n      this._tilesState.remove(node);\n    }\n\n    for (const { node } of added.filter(isOwn)) {\n      this._tilesState.add(node);\n    }\n\n    this._tilesState.assignTiles();\n    this._tilesState.adjustTileGridPosition();\n    this._updateMaximizedTile();\n  }\n\n  /**\n   * Locks/unlocks the grid container height in response to a tile's maximized state changing.\n   *\n   * @remarks\n   * Maximizing a tile removes it from the grid flow (absolute positioning), so it no longer\n   * contributes to the grid's intrinsic height. When that tile is the sole contributor to the\n   * tallest row track, the container would otherwise collapse to the remaining tiles and cut off\n   * the maximized tile's content. Capturing the current height before the layout change keeps the\n   * container stable, and it is released once no tile remains maximized.\n   */\n  private _setMaximizedState(): void {\n    const grid = this._grid.value;\n    this._updateMaximizedTile();\n\n    if (grid) {\n      if (this._hasMaximizedTile) {\n        if (!grid.style.minHeight) {\n          grid.style.minHeight = `${grid.offsetHeight}px`;\n        }\n      } else {\n        grid.style.minHeight = '';\n      }\n    }\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 = {\n      base: true,\n      'maximized-tile': this._hasMaximizedTile,\n    };\n\n    return html`\n      <div\n        ${ref(this._grid)}\n        style=${styleMap(this._internalStyles)}\n        part=${partMap(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,6 +1,5 @@
-import { LitElement } from 'lit';
+import { LitElement, nothing } from 'lit';
 import type { Constructor } from '#internals/mixins/constructor.js';
-import IgcResizeContainerComponent from '../resize-container/resize-container.js';
 export interface IgcTileChangeStateEventArgs {
     tile: IgcTileComponent;
     state: boolean;
@@ -45,28 +44,27 @@ declare const IgcTileComponent_base: Constructor<import("#internals/mixins/event
  * @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 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.
+ * @csspart tile-container - The wrapper around the tile content and its resize adorners.
+ * @csspart trigger-side - The side resize handle of the tile.
+ * @csspart trigger - The corner resize handle of the tile.
+ * @csspart trigger-bottom - The bottom resize handle of the tile.
  */
 export default class IgcTileComponent extends IgcTileComponent_base {
     static readonly tagName = "igc-tile";
     static styles: import("lit").CSSResult[];
     static register(): void;
     private readonly _slots;
-    private readonly _dragController;
     private readonly _fullscreenController;
     private readonly _resizeState;
     private readonly _dragStack;
-    /** Shared config for the span properties - a value below 1 is coerced to 1. */
+    /** Shared config for the grid placement properties, projected into a CSS variable on the host. */
+    private static _gridVariable;
+    /** Part name and resize direction for each of the tile resize adorners. */
+    private static readonly _adorners;
+    /** Config for the span properties - a value below 1 is coerced to 1. */
     private static _spanVariable;
-    /** Shared config for the start properties - a non-positive value removes the explicit placement. */
+    /** Config for the start properties - a non-positive value removes the explicit placement. */
     private static _startVariable;
-    /**
-     * Context consumer callback that sets the updated configuration of the internal drag controller
-     * based on the passed tile manager properties.
-     */
-    private _setDragConfiguration;
     private readonly _context;
     /** Returns the parent tile manager context. */
     private get _tileManagerCtx();
@@ -75,12 +73,23 @@ export default class IgcTileComponent extends IgcTileComponent_base {
     private get _cssContainer();
     /** Returns the tile manager current resize mode. */
     private get _resizeMode();
+    /** Returns the tile manager current drag mode. */
+    private get _dragMode();
     protected readonly _headerRef: import("lit-html/directives/ref.js").Ref<HTMLElement>;
-    protected readonly _resizeContainer?: IgcResizeContainerComponent;
+    /** The DOM container measured and used as a resize target by the resizable directive. */
+    protected readonly _containerRef: import("lit-html/directives/ref.js").Ref<HTMLElement>;
+    /**
+     * Not cached: toggling `_resizeDisabled` (maximize, fullscreen, resize mode)
+     * switches the render template and recreates this element.
+     */
     _tileContent: HTMLElement;
     private _isDragging;
     private _isResizing;
-    /** Whether to render the resize container based on tile and tile manager configuration. */
+    /** Whether the tile is hovered while the tile manager is in `hover` resize mode. */
+    private _isResizeActive;
+    /** Whether the resize adorners and the active resize outline are shown. */
+    private get _resizeAdornersVisible();
+    /** Whether to render the resize adorners based on tile and tile manager configuration. */
     private get _resizeDisabled();
     /**
      * The number of columns the tile will span.
@@ -182,12 +191,17 @@ export default class IgcTileComponent extends IgcTileComponent_base {
     private _handleMaximize;
     private _emitFullScreenEvent;
     private _emitMaximizedEvent;
-    private _emitTileDragStart;
-    private _emitTileResizeStart;
+    private _emitStartEvent;
     protected _renderDefaultAction(type: 'maximize' | 'fullscreen'): import("lit-html").TemplateResult<1>;
     protected _renderHeader(): import("lit-html").TemplateResult<1>;
+    private _renderActionSlot;
+    private _createDragOptions;
     protected _renderContent(): import("lit-html").TemplateResult<1>;
-    private _renderAdornerSlot;
+    private _handleResizePointerEnter;
+    private _handleResizePointerLeave;
+    private _createResizeOptions;
+    private _renderAdorner;
+    protected _renderAdorners(): typeof nothing | import("lit-html").TemplateResult<1>;
     protected render(): import("lit-html").TemplateResult<1>;
 }
 declare global {