igniteui-webcomponents 7.3.0 → 7.3.2

package/components/tile-manager/tile.js

@@ -10,21 +10,22 @@ import { createRef, ref } from 'lit/directives/ref.js';
 import { setTransitionName, startViewTransition, } from '#animations/view-transition.js';
 import { tileManagerContext, } from '#internals/context.js';
 import { createAsyncContext } from '#internals/controllers/async-consumer.js';
-import { addDragController, } from '#internals/controllers/drag.js';
 import { addFullscreenController } from '#internals/controllers/fullscreen.js';
 import { addSlotController, setSlots } from '#internals/controllers/slot.js';
 import { coercedProperty, } from '#internals/decorators/coerced-property.js';
 import { registerComponent } from '#internals/definitions/register.js';
+import { draggable, } from '#internals/directives/drag.js';
+import { resizable, } from '#internals/directives/resize.js';
 import { EventEmitterMixin } from '#internals/mixins/event-emitter.js';
 import { partMap } from '#internals/part-map.js';
 import { isLTR } from '#internals/utils/dom.js';
 import { getElementFromPath } from '#internals/utils/events.js';
+import { bindIf } from '#internals/utils/lit.js';
 import { asNumber } from '#internals/utils/math.js';
 import { createIdGenerator } from '#internals/utils/strings.js';
 import { addThemingController } from '#theming/theming-controller.js';
 import IgcIconButtonComponent from '../button/icon-button.js';
 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';
@@ -37,23 +38,26 @@ export default class IgcTileComponent extends EventEmitterMixin(LitElement) {
     static { this.tagName = 'igc-tile'; }
     static { this.styles = [styles, shared]; }
     static register() {
-        registerComponent(IgcTileComponent, IgcIconButtonComponent, IgcDividerComponent, IgcResizeContainerComponent);
+        registerComponent(IgcTileComponent, IgcIconButtonComponent, IgcDividerComponent);
     }
-    static _spanVariable(name) {
+    static _gridVariable(name, transform) {
         return {
-            transform: ({ value }) => Math.max(1, asNumber(value)),
+            transform: ({ value }) => transform(value),
             onChange: ({ value, host }) => {
-                host.style.setProperty(name, value.toString());
+                host.style.setProperty(name, value != null ? value.toString() : null);
             },
         };
     }
+    static { this._adorners = {
+        side: { part: 'trigger-side', direction: 'horizontal' },
+        corner: { part: 'trigger', direction: 'both' },
+        bottom: { part: 'trigger-bottom', direction: 'vertical' },
+    }; }
+    static _spanVariable(name) {
+        return IgcTileComponent._gridVariable(name, (value) => Math.max(1, asNumber(value)));
+    }
     static _startVariable(name) {
-        return {
-            transform: ({ value }) => Math.max(0, asNumber(value)) || null,
-            onChange: ({ value, host }) => {
-                host.style.setProperty(name, value ? value.toString() : null);
-            },
-        };
+        return IgcTileComponent._gridVariable(name, (value) => Math.max(0, asNumber(value)) || null);
     }
     get _tileManagerCtx() {
         return this._context.value;
@@ -67,6 +71,12 @@ export default class IgcTileComponent extends EventEmitterMixin(LitElement) {
     get _resizeMode() {
         return this._tileManager?.resizeMode ?? 'none';
     }
+    get _dragMode() {
+        return this._tileManager?.dragMode ?? 'none';
+    }
+    get _resizeAdornersVisible() {
+        return this._isResizeActive || this._resizeMode === 'always';
+    }
     get _resizeDisabled() {
         return (this.disableResize ||
             this.maximized ||
@@ -79,31 +89,18 @@ export default class IgcTileComponent extends EventEmitterMixin(LitElement) {
     constructor() {
         super();
         this._slots = addSlotController(this, { slots: Slots });
-        this._dragController = addDragController(this, {
-            skip: this._skipDrag,
-            matchTarget: this._match,
-            ghost: this._createDragGhost,
-            start: this._handleDragStart,
-            over: this._handleDragOver,
-            end: this._handleDragEnd,
-            cancel: this._handleDragCancel,
-        });
         this._fullscreenController = addFullscreenController(this, {
             enter: this._emitFullScreenEvent,
             exit: this._emitFullScreenEvent,
         });
         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._context = createAsyncContext(this, tileManagerContext);
         this._headerRef = createRef();
+        this._containerRef = createRef();
         this._isDragging = false;
         this._isResizing = false;
+        this._isResizeActive = false;
         this.colSpan = 1;
         this.rowSpan = 1;
         this.colStart = null;
@@ -113,9 +110,79 @@ export default class IgcTileComponent extends EventEmitterMixin(LitElement) {
         this.disableFullscreen = false;
         this.disableMaximize = false;
         this.position = -1;
+        this._handleDragStart = () => {
+            if (!this._emitStartEvent('igcTileDragStart')) {
+                return false;
+            }
+            this._setDragState();
+            this._dragStack.push(this);
+            return true;
+        };
+        this._handleDragOver = ({ event, state }) => {
+            const match = state.element;
+            if (this._dragStack.peek() === match) {
+                if (this._shouldSwap(event, state.pointerState.direction, match)) {
+                    this._dragStack.pop();
+                    this._dragStack.push(match);
+                    this._performSwap(match);
+                }
+                return;
+            }
+            this._dragStack.push(match);
+            this._performSwap(match);
+        };
+        this._handleDragCancel = () => {
+            startViewTransition(() => {
+                this._dragStack.restore();
+                this._dragStack.reset();
+            });
+            this._setDragState(false);
+            this.emitEvent('igcTileDragCancel', { detail: this });
+        };
+        this._handleDragEnd = () => {
+            this._setDragState(false);
+            this._dragStack.reset();
+            this.emitEvent('igcTileDragEnd', { detail: this });
+        };
+        this._skipDrag = (event) => {
+            if (this.maximized || this.fullscreen) {
+                return true;
+            }
+            return Boolean(getElementFromPath((e) => e.matches('[part*=trigger]') || e.matches('#tile-actions'), event));
+        };
+        this._match = (element) => {
+            return element !== this && IgcTileComponent.tagName === element.localName;
+        };
+        this._createDragGhost = () => {
+            return createTileDragGhost(this);
+        };
         this._createResizeGhost = () => {
             return createTileGhost(this);
         };
+        this._handleResizeStart = ({ event, state }) => {
+            if (!this._emitStartEvent('igcTileResizeStart')) {
+                return false;
+            }
+            event.preventDefault();
+            this._resizeState.updateState(state.initial, this, this._cssContainer);
+            this._setResizeState();
+            return true;
+        };
+        this._handleResizeEnd = ({ state }) => {
+            const { colSpan, rowSpan } = this._resizeState.calculateResizedGridPosition(state.current);
+            state.commit = async () => {
+                await startViewTransition(() => {
+                    this.colSpan = colSpan;
+                    this.rowSpan = rowSpan;
+                }).updateCallbackDone;
+                this._setResizeState(false);
+                this.emitEvent('igcTileResizeEnd', { detail: this });
+            };
+        };
+        this._handleResizeCancel = () => {
+            this._setResizeState(false);
+            this.emitEvent('igcTileResizeCancel', { detail: this });
+        };
         addThemingController(this, all);
     }
     connectedCallback() {
@@ -131,47 +198,11 @@ export default class IgcTileComponent extends EventEmitterMixin(LitElement) {
         this.style.pointerEvents = state ? 'none' : '';
         this.part.toggle('dragging', state);
     }
-    _handleDragStart() {
-        if (!this._emitTileDragStart()) {
-            return false;
-        }
-        this._setDragState();
-        this._dragStack.push(this);
-        return true;
-    }
-    _handleDragOver({ event, state }) {
-        const match = state.element;
-        if (this._dragStack.peek() === match) {
-            if (this._shouldSwap(event, state, match)) {
-                this._dragStack.pop();
-                this._dragStack.push(match);
-                this._performSwap(match);
-            }
-            return;
-        }
-        this._dragStack.push(match);
-        this._performSwap(match);
-    }
-    _handleDragCancel() {
-        startViewTransition(() => {
-            this._dragStack.restore();
-            this._dragStack.reset();
-        });
-        this._dragController.dispose();
-        this._setDragState(false);
-        this.emitEvent('igcTileDragCancel', { detail: this });
-    }
-    _handleDragEnd() {
-        this._setDragState(false);
-        this._dragStack.reset();
-        this.emitEvent('igcTileDragEnd', { detail: this });
-    }
     _performSwap(match) {
         startViewTransition(() => swapTiles(this, match));
     }
-    _shouldSwap({ clientX, clientY }, state, match) {
+    _shouldSwap({ clientX, clientY }, direction, match) {
         const LTR = isLTR(this);
-        const direction = state.pointerState.direction;
         const { left, top, width, height } = match.getBoundingClientRect();
         const relativeX = (clientX - left) / width;
         const relativeY = (clientY - top) / height;
@@ -190,57 +221,19 @@ export default class IgcTileComponent extends EventEmitterMixin(LitElement) {
                 return false;
         }
     }
-    _skipDrag(event) {
-        if (this.maximized || this.fullscreen) {
-            return true;
-        }
-        return Boolean(getElementFromPath((e) => e.matches('[part*=trigger]') || e.matches('#tile-actions'), event));
-    }
-    _match(element) {
-        return element !== this && IgcTileComponent.tagName === element.localName;
-    }
-    _createDragGhost() {
-        return createTileDragGhost(this);
-    }
     _setResizeState(state = true) {
         this._isResizing = state;
         this.style.zIndex = state ? '1' : '';
         this.part.toggle('resizing', state);
     }
-    _handleResizeStart(event) {
-        if (!this._emitTileResizeStart()) {
-            event.preventDefault();
-            return;
-        }
-        this._resizeState.updateState(event.detail.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) {
+    _handleResize({ state }, direction) {
+        if (direction !== 'vertical') {
             state.current.width = this._resizeState.calculateSnappedWidth(state);
         }
-        if (isHeightResize) {
+        if (direction !== 'horizontal') {
             state.current.height = this._resizeState.calculateSnappedHeight(state);
         }
     }
-    _handleResizeEnd({ detail: { state }, }) {
-        const { colSpan, rowSpan } = this._resizeState.calculateResizedGridPosition(state.current);
-        state.commit = async () => {
-            await startViewTransition(() => {
-                this.colSpan = colSpan;
-                this.rowSpan = rowSpan;
-            }).updateCallbackDone;
-            this._setResizeState(false);
-            this.emitEvent('igcTileResizeEnd', { detail: this });
-        };
-    }
-    _handleResizeCancel() {
-        this._setResizeState(false);
-        this.emitEvent('igcTileResizeCancel', { detail: this });
-    }
     _handleFullscreen() {
         this._fullscreenController.setState(!this.fullscreen);
     }
@@ -267,17 +260,8 @@ export default class IgcTileComponent extends EventEmitterMixin(LitElement) {
             cancelable: true,
         });
     }
-    _emitTileDragStart() {
-        return this.emitEvent('igcTileDragStart', {
-            detail: this,
-            cancelable: true,
-        });
-    }
-    _emitTileResizeStart() {
-        return this.emitEvent('igcTileResizeStart', {
-            detail: this,
-            cancelable: true,
-        });
+    _emitStartEvent(name) {
+        return this.emitEvent(name, { detail: this, cancelable: true });
     }
     _renderDefaultAction(type) {
         const [icon, listener] = type === 'fullscreen'
@@ -315,39 +299,46 @@ export default class IgcTileComponent extends EventEmitterMixin(LitElement) {
           <slot name="title"></slot>
         </header>
         <section id="tile-actions" part="actions">
-          ${hasMaximizeSlot
-            ? html `
-                  <slot name="maximize-action">
-                    ${this._renderDefaultAction('maximize')}
-                  </slot>
-                `
-            : nothing}
-          ${hasFullscreenSlot
-            ? html `
-                  <slot name="fullscreen-action">
-                    ${this._renderDefaultAction('fullscreen')}
-                  </slot>
-                `
-            : nothing}
-
+          ${hasMaximizeSlot ? this._renderActionSlot('maximize') : nothing}
+          ${hasFullscreenSlot ? this._renderActionSlot('fullscreen') : nothing}
           <slot name="actions"></slot>
         </section>
       </section>
       <igc-divider></igc-divider>
     `;
     }
+    _renderActionSlot(type) {
+        return html `
+      <slot name="${type}-action">${this._renderDefaultAction(type)}</slot>
+    `;
+    }
+    _createDragOptions() {
+        const dragMode = this._dragMode;
+        return {
+            enabled: dragMode !== 'none',
+            target: () => this,
+            trigger: dragMode === 'tile-header' ? () => this._headerRef.value : undefined,
+            skip: this._skipDrag,
+            matchTarget: this._match,
+            ghostFactory: this._createDragGhost,
+            start: this._handleDragStart,
+            over: this._handleDragOver,
+            end: this._handleDragEnd,
+            cancel: this._handleDragCancel,
+        };
+    }
     _renderContent() {
         const parts = {
             base: true,
-            draggable: this._tileManager?.dragMode !== 'none',
+            draggable: this._dragMode !== 'none',
             fullscreen: this.fullscreen,
             dragging: this._isDragging,
-            resizable: !this.disableResize && this._tileManager?.resizeMode !== 'none',
+            resizable: !this.disableResize && this._resizeMode !== 'none',
             resizing: this._isResizing,
             maximized: this.maximized,
         };
         return html `
-      <div part=${partMap(parts)}>
+      <div part=${partMap(parts)} ${draggable(this._createDragOptions())}>
         ${this._renderHeader()}
         <div part="content-container">
           <slot></slot>
@@ -355,42 +346,68 @@ export default class IgcTileComponent extends EventEmitterMixin(LitElement) {
       </div>
     `;
     }
-    _renderAdornerSlot(name) {
-        return html `<slot name="${name}-adorner" slot="${name}-adorner"></slot>`;
+    _handleResizePointerEnter() {
+        this._isResizeActive = true;
+    }
+    _handleResizePointerLeave() {
+        this._isResizeActive = false;
+    }
+    _createResizeOptions(direction) {
+        return {
+            mode: 'deferred',
+            direction,
+            target: () => this._containerRef.value,
+            ghostFactory: this._createResizeGhost,
+            start: this._handleResizeStart,
+            resize: (params) => this._handleResize(params, direction),
+            end: this._handleResizeEnd,
+            cancel: this._handleResizeCancel,
+        };
+    }
+    _renderAdorner(type) {
+        const { part, direction } = IgcTileComponent._adorners[type];
+        const parts = {
+            [part]: true,
+            custom: this._slots.hasAssignedElements(`${type}-adorner`),
+        };
+        return html `
+      <slot
+        name="${type}-adorner"
+        part=${partMap(parts)}
+        ${resizable(this._createResizeOptions(direction))}
+      ></slot>
+    `;
+    }
+    _renderAdorners() {
+        return this._resizeAdornersVisible
+            ? html `
+          ${this._renderAdorner('side')} ${this._renderAdorner('corner')}
+          ${this._renderAdorner('bottom')}
+        `
+            : nothing;
     }
     render() {
-        const isActive = this._resizeMode === 'always';
+        const isHoverMode = this._resizeMode === 'hover';
+        const parts = {
+            'tile-container': true,
+            active: this._resizeAdornersVisible,
+        };
         return this._resizeDisabled
             ? this._renderContent()
             : html `
-          <igc-resize
-            part=${partMap({
-                resize: true,
-                'side-adorner': this._slots.hasAssignedElements('side-adorner'),
-                'corner-adorner': this._slots.hasAssignedElements('corner-adorner'),
-                'bottom-adorner': this._slots.hasAssignedElements('bottom-adorner'),
-            })}
-            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}
+          <div
+            ${ref(this._containerRef)}
+            part=${partMap(parts)}
+            @pointerenter=${bindIf(isHoverMode, this._handleResizePointerEnter)}
+            @pointerleave=${bindIf(isHoverMode, this._handleResizePointerLeave)}
           >
-            ${this._renderContent()} ${this._renderAdornerSlot('side')}
-            ${this._renderAdornerSlot('corner')}
-            ${this._renderAdornerSlot('bottom')}
-          </igc-resize>
+            ${this._renderContent()} ${this._renderAdorners()}
+          </div>
         `;
     }
 }
 __decorate([
-    query(IgcResizeContainerComponent.tagName)
-], IgcTileComponent.prototype, "_resizeContainer", void 0);
-__decorate([
-    query('[part~="base"]', true)
+    query('[part~="base"]')
 ], IgcTileComponent.prototype, "_tileContent", void 0);
 __decorate([
     state()
@@ -398,6 +415,9 @@ __decorate([
 __decorate([
     state()
 ], IgcTileComponent.prototype, "_isResizing", void 0);
+__decorate([
+    state()
+], IgcTileComponent.prototype, "_isResizeActive", void 0);
 __decorate([
     property({ type: Number, attribute: 'col-span' }),
     coercedProperty(IgcTileComponent._spanVariable('--ig-col-span'))