igniteui-webcomponents 5.3.0-beta.3 → 5.3.0

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";
@@ -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} ${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);