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

package/components/tile-manager/tile.js

@@ -5,41 +5,99 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 var IgcTileComponent_1;
-import { ContextProvider, consume } from '@lit/context';
-import { LitElement, html } from 'lit';
+import { LitElement, html, nothing } from 'lit';
 import { property, query, 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 { tileContext, tileManagerContext, } from '../common/context.js';
+import IgcIconButtonComponent from '../button/icon-button.js';
+import { tileManagerContext, } from '../common/context.js';
+import { createAsyncContext } from '../common/controllers/async-consumer.js';
+import { addDragController, } from '../common/controllers/drag.js';
+import { addFullscreenController } from '../common/controllers/fullscreen.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
-import { asNumber, createCounter, partNameMap } from '../common/util.js';
-import { addFullscreenController } from './controllers/fullscreen.js';
-import { addTileDragAndDrop } from './controllers/tile-dnd.js';
-import { isSameTile, swapTiles } from './position.js';
-import IgcResizeComponent from './resize-element.js';
+import { asNumber, createCounter, findElementFromEventPath, getCenterPoint, partNameMap, } from '../common/util.js';
+import IgcDividerComponent from '../divider/divider.js';
+import IgcResizeContainerComponent from '../resize-container/resize-container.js';
+import { createTileDragStack, swapTiles } from './position.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 IgcTileHeaderComponent from './tile-header.js';
-import { ResizeUtil } from './tile-util.js';
+import { createTileDragGhost, createTileGhost, createTileResizeState, } from './tile-util.js';
 let IgcTileComponent = IgcTileComponent_1 = class IgcTileComponent extends EventEmitterMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this._dragController = addDragController(this, {
+            skip: this._skipDrag,
+            ghost: this._createDragGhost,
+            start: this._handleDragStart,
+            move: this._handleDragMove,
+            end: this._handleDragEnd,
+            cancel: this._handleDragCancel,
+        });
+        this._fullscreenController = addFullscreenController(this, {
+            enter: this.emitFullScreenEvent,
+            exit: this.emitFullScreenEvent,
+        });
+        this._colSpan = 1;
+        this._rowSpan = 1;
+        this._colStart = null;
+        this._rowStart = null;
+        this._position = -1;
+        this._resizeState = createTileResizeState();
+        this._dragStack = createTileDragStack();
+        this._setDragConfiguration = ({ instance: { dragMode }, }) => {
+            this._dragController.set({
+                enabled: dragMode !== 'none',
+                trigger: dragMode === 'tile-header' ? () => this._headerRef.value : undefined,
+            });
+        };
+        this._context = createAsyncContext(this, tileManagerContext, this._setDragConfiguration);
+        this._headerRef = createRef();
+        this._maximized = false;
+        this._isDragging = false;
+        this._isResizing = false;
+        this.tileId = null;
+        this.disableResize = false;
+        this.disableFullscreen = false;
+        this.disableMaximize = false;
+        this._customAdorners = new Map(Object.entries({
+            side: false,
+            corner: false,
+            bottom: false,
+        }));
+    }
     static register() {
-        registerComponent(IgcTileComponent_1, IgcTileHeaderComponent, IgcResizeComponent);
+        registerComponent(IgcTileComponent_1, IgcIconButtonComponent, IgcDividerComponent, IgcResizeContainerComponent);
+    }
+    get _tileManagerCtx() {
+        return this._context.value;
+    }
+    get _tileManager() {
+        return this._tileManagerCtx?.instance;
     }
-    _setTileContext() {
-        this._context.setValue({
-            instance: this,
-            setFullscreenState: (fullscreen, isUserTriggered) => this._fullscreenController.setState(fullscreen, isUserTriggered),
-        }, true);
+    get _cssContainer() {
+        return this._tileManagerCtx?.grid.value;
     }
-    get _draggedItem() {
-        return this._managerContext?.draggedItem ?? null;
+    get _resizeMode() {
+        return this._tileManager?.resizeMode ?? 'none';
     }
-    get _isSlideMode() {
-        return this._managerContext
-            ? this._managerContext.instance.dragMode === 'slide'
-            : true;
+    get _resizeDisabled() {
+        return (this.disableResize ||
+            this.maximized ||
+            this.fullscreen ||
+            this._resizeMode === 'none');
+    }
+    get _shouldHideHeader() {
+        const hasTitle = this._headerRef.value
+            ?.querySelector('slot[name="title"]')
+            ?.assignedNodes().length;
+        const hasActions = this.shadowRoot
+            ?.querySelector('slot[name="actions"]')
+            ?.assignedNodes().length;
+        return (!hasTitle && !hasActions && this.disableMaximize && this.disableFullscreen);
     }
     set colSpan(value) {
         this._colSpan = Math.max(1, asNumber(value));
@@ -69,310 +127,201 @@ let IgcTileComponent = IgcTileComponent_1 = class IgcTileComponent extends Event
     get rowStart() {
         return this._rowStart;
     }
-    set fullscreen(value) {
-        this._fullscreenController.setState(value);
-    }
     get fullscreen() {
         return this._fullscreenController.fullscreen;
     }
     set maximized(value) {
         this._maximized = value;
-        this._setTileContext();
-        if (this._managerContext) {
-            this._managerContext.instance.requestUpdate();
+        if (this._tileManagerCtx) {
+            this._tileManagerCtx.instance.requestUpdate();
         }
     }
     get maximized() {
         return this._maximized;
     }
-    set disableDrag(value) {
-        this._disableDrag = value;
-        this._dragController.enabled = !this._disableDrag;
-    }
-    get disableDrag() {
-        return this._disableDrag;
-    }
     set position(value) {
-        this._position = Number(value);
-        this.style.order = `${this._position}`;
+        this._position = asNumber(value);
+        this.style.order = this._position.toString();
     }
     get position() {
         return this._position;
     }
-    get gridColumnWidth() {
-        const tileManager = this._managerContext.instance.shadowRoot.querySelector("[part~='base']");
-        const gridTemplateColumns = getComputedStyle(tileManager).getPropertyValue('grid-template-columns');
-        const firstColumnWidth = Number.parseFloat(gridTemplateColumns.split(' ')[0]);
-        return firstColumnWidth || this._cachedStyles.minWidth;
-    }
-    constructor() {
-        super();
-        this._dragController = addTileDragAndDrop(this, {
-            dragStart: this.handleDragStart,
-            dragEnd: this.handleDragEnd,
-            dragEnter: this.handleDragEnter,
-            dragLeave: this.handleDragLeave,
-            dragOver: this.handleDragOver,
-            drop: this.handleDragLeave,
-        });
-        this._fullscreenController = addFullscreenController(this, this.emitFullScreenEvent);
-        this._colSpan = 1;
-        this._rowSpan = 1;
-        this._colStart = null;
-        this._rowStart = null;
-        this._position = -1;
-        this._disableDrag = false;
-        this._maximized = false;
-        this._initialPointerX = null;
-        this._initialPointerY = null;
-        this._dragCounter = 0;
-        this._dragGhost = null;
-        this._dragImage = null;
-        this._cachedStyles = {};
-        this._context = new ContextProvider(this, {
-            context: tileContext,
-            initialValue: {
-                instance: this,
-                setFullscreenState: (fullscreen, isUserTriggered) => this._fullscreenController.setState(fullscreen, isUserTriggered),
-            },
-        });
-        this._isDragging = false;
-        this._hasDragOver = false;
-        this._isResizing = false;
-        this.tileId = null;
-        this.disableResize = false;
-        this.ghostFactory = () => {
-            this.cacheStyles();
-            const ghost = document.createElement('div');
-            Object.assign(ghost.style, {
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                zIndex: 1000,
-                background: this._cachedStyles.background,
-                border: `1px solid ${this._cachedStyles.border}`,
-                borderRadius: this._cachedStyles.borderRadius,
-                width: '100%',
-                height: '100%',
-                gridRow: '',
-                gridColumn: '',
-            });
-            return ghost;
-        };
-        this._setTileContext();
-    }
     connectedCallback() {
         super.connectedCallback();
         this.tileId = this.tileId || `tile-${IgcTileComponent_1.increment()}`;
+        this.style.viewTransitionName =
+            this.style.viewTransitionName || `tile-transition-${this.tileId}`;
     }
-    updated(changedProperties) {
-        super.updated(changedProperties);
-        const parts = partNameMap({
-            dragging: this._isDragging,
-            resizing: this._isResizing,
-        });
-        if (parts.trim()) {
-            this.setAttribute('part', parts);
-        }
-        else {
-            this.removeAttribute('part');
-        }
+    _setDragState(state = true) {
+        this._isDragging = state;
+        this._tileContent.style.opacity = state ? '0' : '1';
+        this.style.pointerEvents = state ? 'none' : '';
+        this.part.toggle('dragging', state);
     }
-    emitFullScreenEvent(state) {
-        return this.emitEvent('igcTileFullscreen', {
-            detail: { tile: this, state },
-            cancelable: true,
-        });
-    }
-    assignDragImage(e) {
-        const rect = this.getBoundingClientRect();
-        const offsetX = e.clientX - rect.left;
-        const offsetY = e.clientY - rect.top;
-        const compStyles = getComputedStyle(this);
-        this.cacheStyles();
-        this._dragImage = this.cloneNode(true);
-        Object.assign(this._dragImage.style, {
-            width: compStyles.width,
-            height: compStyles.height,
-            position: 'absolute',
-            top: '-99999px',
-            left: '-99999px',
-            background: this._cachedStyles.tileBackground,
-            border: `1px solid ${this._cachedStyles.tileBorder}`,
-            borderRadius: this._cachedStyles.borderRadius,
-            overflow: 'hidden',
-        });
-        document.body.append(this._dragImage);
-        e.dataTransfer.setDragImage(this._dragImage, offsetX, offsetY);
-        e.dataTransfer.effectAllowed = 'move';
-    }
-    handleDragStart(e) {
-        this.assignDragImage(e);
+    _handleDragStart() {
         this.emitEvent('tileDragStart', { detail: this });
-        this._dragGhost = this.ghostFactory();
-        this._dragGhost.inert = true;
-        if (this._dragGhost) {
-            this.append(this._dragGhost);
-        }
-        this._isDragging = true;
-    }
-    handleDragEnter() {
-        this._dragCounter++;
-        this._hasDragOver = true;
-    }
-    handleDragOver(event) {
-        if (!this._draggedItem) {
+        this._setDragState();
+        this._dragStack.push(this);
+    }
+    _handleDragMove({ event: { clientX, clientY }, }) {
+        const match = document
+            .elementsFromPoint(clientX, clientY)
+            .find(this._match);
+        if (!match) {
             return;
         }
-        if (isSameTile(this, this._draggedItem)) {
-            this._tileContent.style.visibility = 'hidden';
-            if (this._dragGhost) {
-                Object.assign(this._dragGhost.style, {
-                    visibility: 'visible',
+        if (this._dragStack.peek() === match) {
+            const { x, y } = getCenterPoint(match);
+            const shouldSwap = this.position <= match.position
+                ? clientX > x || clientY > y
+                : clientX < x || clientY < y;
+            if (shouldSwap) {
+                this._dragStack.pop();
+                this._dragStack.push(match);
+                startViewTransition(() => {
+                    swapTiles(this, match);
                 });
             }
-            if (this._managerContext) {
-                this._managerContext.lastSwapTile = null;
-            }
-        }
-        else if (this._isSlideMode) {
-            if (this._managerContext &&
-                (!this._managerContext.lastSwapTile ||
-                    this.hasPointerLeftLastSwapTile(event, this._managerContext.lastSwapTile))) {
-                this._managerContext.lastSwapTile = this;
-                swapTiles(this, this._draggedItem);
-            }
+            return;
         }
+        this._dragStack.push(match);
+        startViewTransition(() => {
+            swapTiles(this, match);
+        });
     }
-    handleDragLeave() {
-        this._dragCounter--;
-        if (this._dragCounter === 0) {
-            this._hasDragOver = false;
-        }
+    _handleDragCancel() {
+        startViewTransition(() => {
+            this._dragStack.restore();
+            this._dragStack.reset();
+        });
+        this._dragController.dispose();
+        this._setDragState(false);
     }
-    handleDragEnd() {
+    _handleDragEnd() {
         this.emitEvent('tileDragEnd', { detail: this });
-        this._isDragging = false;
-        if (this._dragGhost) {
-            this._dragGhost.remove();
-            this._dragGhost = null;
+        this._setDragState(false);
+        this._dragStack.reset();
+    }
+    _skipDrag(event) {
+        if (this._maximized || this.fullscreen) {
+            return true;
         }
-        if (this._dragImage) {
-            this._dragImage.remove();
-            this._dragImage = null;
+        return Boolean(findElementFromEventPath((e) => e.matches('[part*=trigger]') || e.matches('#tile-actions'), event));
+    }
+    _match(element) {
+        return element !== this && IgcTileComponent_1.tagName === element.localName;
+    }
+    _createDragGhost() {
+        return createTileDragGhost(this);
+    }
+    _setResizeState(state = true) {
+        this._isResizing = state;
+        this.style.zIndex = state ? '1' : '';
+        this.part.toggle('resizing', state);
+    }
+    _handleResizeStart({ detail: { state }, }) {
+        this._resizeState.updateState(state.initial, this, this._cssContainer);
+        this._setResizeState();
+    }
+    _handleResize({ detail: { state }, }) {
+        const trigger = state.trigger;
+        const isWidthResize = trigger.matches('[part*="side"], [part="trigger"]');
+        const isHeightResize = trigger.matches('[part*="bottom"], [part="trigger"]');
+        if (isWidthResize) {
+            state.current.width = this._resizeState.calculateSnappedWidth(state);
         }
-        this._tileContent.style.visibility = 'visible';
-    }
-    hasPointerLeftLastSwapTile(event, lastSwapTile) {
-        if (!lastSwapTile)
-            return false;
-        const rect = lastSwapTile.getBoundingClientRect();
-        const pointerX = event.clientX;
-        const pointerY = event.clientY;
-        const outsideBoundaries = pointerX < rect.left ||
-            pointerX > rect.right ||
-            pointerY < rect.top ||
-            pointerY > rect.bottom;
-        if (outsideBoundaries && this._managerContext) {
-            this._managerContext.lastSwapTile = null;
+        if (isHeightResize) {
+            state.current.height = this._resizeState.calculateSnappedHeight(state);
         }
-        return outsideBoundaries;
-    }
-    cacheStyles() {
-        const tileComputedStyle = getComputedStyle(this);
-        const parentWrapper = this.parentElement.shadowRoot.querySelector('[part="base"]');
-        const tileManagerComputedStyle = getComputedStyle(parentWrapper);
-        const gap = Number.parseFloat(tileManagerComputedStyle.getPropertyValue('grid-gap')) || 0;
-        const rowHeights = tileManagerComputedStyle.gridTemplateRows
-            .split(' ')
-            .map((height) => Number.parseFloat(height.trim()));
-        this._cachedStyles = {
-            columnCount: Number.parseFloat(tileComputedStyle.getPropertyValue('--ig-column-count')),
-            background: tileComputedStyle.getPropertyValue('--placeholder-background'),
-            tileBackground: tileComputedStyle.getPropertyValue('--tile-background'),
-            tileBorder: tileComputedStyle.getPropertyValue('--hover-border-color'),
-            border: tileComputedStyle.getPropertyValue('--ghost-border'),
-            borderRadius: tileComputedStyle.getPropertyValue('--border-radius'),
-            minWidth: Number.parseFloat(tileComputedStyle.getPropertyValue('--ig-min-col-width')),
-            minHeight: Number.parseFloat(tileComputedStyle.getPropertyValue('--ig-min-row-height')),
-            initialTop: parentWrapper.getBoundingClientRect().top,
-            rowHeights,
-            gap,
-        };
     }
-    _handleResizeStart(event) {
-        const ghostElement = event.detail.state.ghost;
-        this._initialPointerX = event.detail.event.clientX;
-        this._initialPointerY = event.detail.event.clientY;
-        if (ghostElement) {
-            ghostElement.style.minWidth = `${this._cachedStyles.minWidth}px`;
-            ghostElement.style.minHeight = `${this._cachedStyles.minHeight}px`;
-        }
+    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?.finished;
+        const { width, height } = this._resizeState.calculateResizedSize(this._cssContainer);
+        this._resizeContainer?.setSize(width, height);
+        this._setResizeState(false);
     }
-    _handleResize(event) {
-        this._isResizing = true;
-        const ghostElement = event.detail.state.current;
-        const rowHeights = this._cachedStyles.rowHeights;
-        if (ghostElement) {
-            const deltaX = event.detail.event.clientX - this._initialPointerX;
-            const deltaY = event.detail.event.clientY - this._initialPointerY;
-            const snappedWidth = ResizeUtil.calculateSnappedWidth(deltaX, event.detail.state.initial.width, this._cachedStyles.gap, this.gridColumnWidth);
-            const actualTop = this._cachedStyles.initialTop + window.scrollY;
-            const initialTop = event.detail.state.initial.top + window.scrollY;
-            const actualBottom = event.detail.state.initial.bottom + window.scrollY;
-            const startingY = actualBottom - actualTop;
-            const snappedHeight = ResizeUtil.calculateSnappedHeight(deltaY, startingY, rowHeights, this._cachedStyles.gap, initialTop, event.detail.state.initial.height);
-            ghostElement.width = snappedWidth;
-            ghostElement.height = snappedHeight;
+    _handleResizeCancel() {
+        this._setResizeState(false);
+    }
+    _handleFullscreen() {
+        this._fullscreenController.setState(!this.fullscreen);
+    }
+    _handleMaximize() {
+        if (!this.emitMaximizedEvent()) {
+            return;
         }
+        this.maximized = !this.maximized;
     }
-    _handleResizeEnd(event) {
-        const state = event.detail.state;
-        const width = state.current.width;
-        const height = state.current.height;
-        const colSpan = Math.max(1, Math.round(width / this.gridColumnWidth));
-        const initialTop = event.detail.state.initial.top + window.scrollY;
-        const startRowIndex = ResizeUtil.calculate(initialTop, this._cachedStyles.rowHeights, this._cachedStyles.gap).targetIndex;
-        const initialSpan = this._calculateRowSpan(state.initial.height, startRowIndex);
-        const currentSpan = this._calculateRowSpan(height, startRowIndex);
-        const deltaY = event.detail.event.clientY - this._initialPointerY;
-        const rowSpan = deltaY > 0
-            ? Math.max(initialSpan, currentSpan)
-            : Math.min(initialSpan, currentSpan);
-        Object.assign(state.ghost.style, {
-            width: '',
-            height: '',
+    emitFullScreenEvent(state) {
+        this.requestUpdate();
+        return this.emitEvent('igcTileFullscreen', {
+            detail: { tile: this, state },
+            cancelable: true,
         });
-        this.style.setProperty('grid-row', `span ${rowSpan}`);
-        this.style.setProperty('grid-column', `span ${colSpan}`);
-        this._isResizing = false;
-        this._initialPointerX = null;
-        this._initialPointerY = null;
-        this._cachedStyles = {};
-    }
-    _calculateRowSpan(height, startRowIndex) {
-        const gap = this._cachedStyles.gap;
-        const rowHeights = this._cachedStyles.rowHeights;
-        let accumulatedHeight = 0;
-        for (let i = 0; i < rowHeights.length; i++) {
-            const rowHeight = rowHeights[startRowIndex + i];
-            const rowGap = startRowIndex + i > 0 ? gap : 0;
-            const halfwayThreshold = accumulatedHeight + rowHeight / 2 + rowGap;
-            accumulatedHeight += rowHeight + rowGap;
-            if (height >= halfwayThreshold && height <= accumulatedHeight) {
-                return i + 1;
-            }
-        }
-        return 1;
     }
-    renderContent() {
+    emitMaximizedEvent() {
+        return this.emitEvent('igcTileMaximize', {
+            detail: { tile: this, state: !this.maximized },
+            cancelable: true,
+        });
+    }
+    _renderDefaultAction(type) {
+        const [icon, listener] = type === 'fullscreen'
+            ? [
+                this.fullscreen ? 'fullscreen_exit' : 'fullscreen',
+                this._handleFullscreen,
+            ]
+            : [
+                this._maximized ? 'collapse_content' : 'expand_content',
+                this._handleMaximize,
+            ];
+        return html `
+      <igc-icon-button
+        variant="flat"
+        collection="default"
+        exportparts="icon"
+        name=${icon}
+        aria-label=${icon}
+        @click=${listener}
+      ></igc-icon-button>
+    `;
+    }
+    _renderHeader() {
+        return html `
+      <section part="header" ?hidden=${this._shouldHideHeader}>
+        <header part="title" ${ref(this._headerRef)}>
+          <slot name="title" @slotchange=${this.requestUpdate}></slot>
+        </header>
+        <section id="tile-actions" part="actions">
+          ${!this.disableMaximize
+            ? html `<slot name="maximize-action"
+                >${this._renderDefaultAction('maximize')}</slot
+              >`
+            : nothing}
+          ${!this.disableFullscreen
+            ? html `<slot name="fullscreen-action"
+                >${this._renderDefaultAction('fullscreen')}</slot
+              >`
+            : nothing}
+
+          <slot name="actions" @slotchange=${this.requestUpdate}></slot>
+        </section>
+      </section>
+      <igc-divider></igc-divider>
+    `;
+    }
+    _renderContent() {
         const parts = partNameMap({
             base: true,
-            'drag-over': this._hasDragOver && !this._isSlideMode,
+            draggable: this._tileManager?.dragMode !== 'none',
             fullscreen: this.fullscreen,
-            draggable: !this.disableDrag,
             dragging: this._isDragging,
-            resizable: !this.disableResize,
+            resizable: !this.disableResize && this._tileManager?.resizeMode !== 'none',
             resizing: this._isResizing,
             maximized: this.maximized,
         });
@@ -383,50 +332,70 @@ let IgcTileComponent = IgcTileComponent_1 = class IgcTileComponent extends Event
             '--ig-row-start': this._rowStart,
         };
         return html `
-      <div part=${parts} .inert=${this._hasDragOver} style=${styleMap(styles)}>
-        <slot name="header"></slot>
+      <div part=${parts} style=${styleMap(styles)}>
+        ${this._renderHeader()}
         <div part="content-container">
           <slot></slot>
         </div>
       </div>
     `;
     }
+    createRenderRoot() {
+        const root = super.createRenderRoot();
+        root.addEventListener('slotchange', () => this.requestUpdate());
+        return root;
+    }
+    _renderAdornerSlot(name) {
+        return html `
+      <slot
+        @slotchange=${() => this._customAdorners.set(name, true)}
+        name="${name}-adorner"
+        slot="${name}-adorner"
+      >
+        <div part="adorner-indicator"></div>
+      </slot>
+    `;
+    }
     render() {
-        const renderResize = this.disableResize || this.maximized || this.fullscreen;
-        return renderResize
-            ? this.renderContent()
-            : html `
-          <igc-resize
-            part="resize"
-            .ghostFactory=${this.ghostFactory}
-            mode="deferred"
-            @igcResizeStart=${this._handleResizeStart}
-            @igcResize=${this._handleResize}
-            @igcResizeEnd=${this._handleResizeEnd}
-          >
-            ${this.renderContent()}
-          </igc-resize>
-        `;
+        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'),
+        })}
+        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>
+    `;
     }
 };
 IgcTileComponent.tagName = 'igc-tile';
 IgcTileComponent.styles = [styles, shared];
 IgcTileComponent.increment = createCounter();
 __decorate([
-    consume({ context: tileManagerContext, subscribe: true })
-], IgcTileComponent.prototype, "_managerContext", void 0);
-__decorate([
-    query('[part="ghost"]', true)
-], IgcTileComponent.prototype, "_ghost", void 0);
+    query(IgcResizeContainerComponent.tagName)
+], IgcTileComponent.prototype, "_resizeContainer", void 0);
 __decorate([
     query('[part~="base"]', true)
 ], IgcTileComponent.prototype, "_tileContent", void 0);
 __decorate([
     state()
-], IgcTileComponent.prototype, "_isDragging", void 0);
+], IgcTileComponent.prototype, "_maximized", void 0);
 __decorate([
     state()
-], IgcTileComponent.prototype, "_hasDragOver", void 0);
+], IgcTileComponent.prototype, "_isDragging", void 0);
 __decorate([
     state()
 ], IgcTileComponent.prototype, "_isResizing", void 0);
@@ -434,29 +403,29 @@ __decorate([
     property({ attribute: 'tile-id', type: String, reflect: true })
 ], IgcTileComponent.prototype, "tileId", void 0);
 __decorate([
-    property({ type: Number })
+    property({ type: Number, attribute: 'col-span' })
 ], IgcTileComponent.prototype, "colSpan", null);
 __decorate([
-    property({ type: Number })
+    property({ type: Number, attribute: 'row-span' })
 ], IgcTileComponent.prototype, "rowSpan", null);
 __decorate([
-    property({ type: Number })
+    property({ type: Number, attribute: 'col-start' })
 ], IgcTileComponent.prototype, "colStart", null);
 __decorate([
-    property({ type: Number })
+    property({ type: Number, attribute: 'row-start' })
 ], IgcTileComponent.prototype, "rowStart", null);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], IgcTileComponent.prototype, "fullscreen", null);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], IgcTileComponent.prototype, "maximized", null);
-__decorate([
-    property({ attribute: 'disable-drag', type: Boolean, reflect: true })
-], IgcTileComponent.prototype, "disableDrag", null);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'disable-resize' })
 ], IgcTileComponent.prototype, "disableResize", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'disable-fullscreen' })
+], IgcTileComponent.prototype, "disableFullscreen", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'disable-maximize' })
+], IgcTileComponent.prototype, "disableMaximize", void 0);
 __decorate([
     property({ type: Number })
 ], IgcTileComponent.prototype, "position", null);