igniteui-webcomponents 5.2.3 → 5.3.0-RC.0

package/components/tile-manager/tile.d.ts

@@ -0,0 +1,194 @@
+import { LitElement } from 'lit';
+import type { Constructor } from '../common/mixins/constructor.js';
+import IgcResizeContainerComponent from '../resize-container/resize-container.js';
+type IgcTileChangeState = {
+    tile: IgcTileComponent;
+    state: boolean;
+};
+export interface IgcTileComponentEventMap {
+    igcTileFullscreen: CustomEvent<IgcTileChangeState>;
+    igcTileMaximize: CustomEvent<IgcTileChangeState>;
+    igcTileDragStart: CustomEvent<IgcTileComponent>;
+    igcTileDragEnd: CustomEvent<IgcTileComponent>;
+    igcTileDragCancel: CustomEvent<IgcTileComponent>;
+    igcResizeStart: CustomEvent<IgcTileComponent>;
+    igcResizeMove: CustomEvent<IgcTileComponent>;
+    igcResizeEnd: CustomEvent<IgcTileComponent>;
+}
+declare const IgcTileComponent_base: Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcTileComponentEventMap>> & Constructor<LitElement>;
+/**
+ * The tile component is used within the `igc-tile-manager` as a container
+ * for displaying various types of information.
+ *
+ * @element igc-tile
+ *
+ * @fires igcTileFullscreen - Fired when tile fullscreen state changes.
+ * @fires igcTileMaximize - Fired when tile 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 igcResizeStart - Fired when tile begins resizing.
+ * @fires igcResizeMove - Fired when tile is being resized.
+ * @fires igcResizeEnd - Fired when tile finishes resizing.
+ *
+ * @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.
+ *
+ * @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 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.
+ */
+export default class IgcTileComponent extends IgcTileComponent_base {
+    static readonly tagName = "igc-tile";
+    static styles: import("lit").CSSResult[];
+    static register(): void;
+    private static readonly increment;
+    private _dragController;
+    private _fullscreenController;
+    private _colSpan;
+    private _rowSpan;
+    private _colStart;
+    private _rowStart;
+    private _position;
+    private _resizeState;
+    private _dragStack;
+    private _customAdorners;
+    /**
+     * Context consumer callback that sets the updated configuration of the internal drag controller
+     * based on the passed tile manager properties.
+     */
+    private _setDragConfiguration;
+    private _context;
+    /** Returns the parent tile manager context. */
+    private get _tileManagerCtx();
+    private get _tileManager();
+    /** Returns the tile manager internal CSS grid container. */
+    private get _cssContainer();
+    /** Returns the tile manager current resize mode. */
+    private get _resizeMode();
+    protected _headerRef: import("lit-html/directives/ref.js").Ref<HTMLElement>;
+    private _titleElements;
+    private _actionsElements;
+    protected _resizeContainer?: IgcResizeContainerComponent;
+    _tileContent: HTMLElement;
+    private _maximized;
+    private _isDragging;
+    private _isResizing;
+    /** Whether to render the resize container based on tile and tile manager configuration. */
+    private get _resizeDisabled();
+    /**
+     * The number of columns the tile will span.
+     *
+     * @remarks
+     * Values <= 1 will be coerced to 1.
+     *
+     * @attr col-span
+     */
+    set colSpan(value: number);
+    get colSpan(): number;
+    /**
+     * The number of rows the tile will span.
+     *
+     * @remarks
+     * Values <= 1 will be coerced to 1.
+     *
+     * @attr row-span
+     */
+    set rowSpan(value: number);
+    get rowSpan(): number;
+    /**
+     * The starting column for the tile.
+     *
+     * @attr col-start
+     */
+    set colStart(value: number | null);
+    get colStart(): number | null;
+    /**
+     * The starting row for the tile.
+     *
+     * @attr row-start
+     */
+    set rowStart(value: number | null);
+    get rowStart(): number | null;
+    /**
+     * Indicates whether the tile occupies the whole screen.
+     *
+     * @property
+     */
+    get fullscreen(): boolean;
+    /**
+     * Indicates whether the tile occupies all available space within the layout.
+     *
+     * @attr maximized
+     */
+    set maximized(value: boolean);
+    get maximized(): boolean;
+    /**
+     * Indicates whether the tile can be resized.
+     * @attr disable-resize
+     */
+    disableResize: boolean;
+    /**
+     * Indicates whether the fullscreen action is displayed.
+     * @attr disable-fullscreen
+     */
+    disableFullscreen: boolean;
+    /**
+     * Indicates whether the maximize action is displayed.
+     * @attr disable-maximize
+     */
+    disableMaximize: boolean;
+    /**
+     * Gets/sets the tile's visual position in the layout.
+     *
+     * Corresponds to the CSS order property.
+     *
+     * @attr position
+     */
+    set position(value: number);
+    get position(): number;
+    /** @internal */
+    connectedCallback(): void;
+    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    private _setDragState;
+    private _handleDragStart;
+    private _handleDragOver;
+    private _handleDragCancel;
+    private _handleDragEnd;
+    private _skipDrag;
+    private _match;
+    private _createDragGhost;
+    private _createResizeGhost;
+    private _setResizeState;
+    private _handleResizeStart;
+    private _handleResize;
+    private _handleResizeEnd;
+    private _handleResizeCancel;
+    private _handleFullscreen;
+    private _handleMaximize;
+    private _emitFullScreenEvent;
+    private _emitMaximizedEvent;
+    private _emitTileDragStart;
+    protected _renderDefaultAction(type: 'maximize' | 'fullscreen'): import("lit-html").TemplateResult<1>;
+    protected _renderHeader(): import("lit-html").TemplateResult<1>;
+    protected _renderContent(): import("lit-html").TemplateResult<1>;
+    private _renderAdornerSlot;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'igc-tile': IgcTileComponent;
+    }
+}
+export {};

package/components/tile-manager/tile.js

@@ -0,0 +1,436 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+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 { startViewTransition } from '../../animations/player.js';
+import { themes } from '../../theming/theming-decorator.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, findElementFromEventPath, getCenterPoint, isEmpty, 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 { 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 } 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,
+            over: this._handleDragOver,
+            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._customAdorners = new Map(Object.entries({
+            side: false,
+            corner: false,
+            bottom: false,
+        }));
+        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.disableResize = false;
+        this.disableFullscreen = false;
+        this.disableMaximize = false;
+        this._createResizeGhost = () => {
+            return createTileGhost(this);
+        };
+    }
+    static register() {
+        registerComponent(IgcTileComponent_1, IgcIconButtonComponent, IgcDividerComponent, IgcResizeContainerComponent);
+    }
+    get _tileManagerCtx() {
+        return this._context.value;
+    }
+    get _tileManager() {
+        return this._tileManagerCtx?.instance;
+    }
+    get _cssContainer() {
+        return this._tileManagerCtx?.grid.value;
+    }
+    get _resizeMode() {
+        return this._tileManager?.resizeMode ?? 'none';
+    }
+    get _resizeDisabled() {
+        return (this.disableResize ||
+            this.maximized ||
+            this.fullscreen ||
+            this._resizeMode === 'none');
+    }
+    set colSpan(value) {
+        this._colSpan = Math.max(1, asNumber(value));
+        this.style.setProperty('--ig-col-span', this._colSpan.toString());
+    }
+    get colSpan() {
+        return this._colSpan;
+    }
+    set rowSpan(value) {
+        this._rowSpan = Math.max(1, asNumber(value));
+        this.style.setProperty('--ig-row-span', this._rowSpan.toString());
+    }
+    get rowSpan() {
+        return this._rowSpan;
+    }
+    set colStart(value) {
+        this._colStart = Math.max(0, asNumber(value)) || null;
+        this.style.setProperty('--ig-col-start', this._colStart ? this._colStart.toString() : null);
+    }
+    get colStart() {
+        return this._colStart;
+    }
+    set rowStart(value) {
+        this._rowStart = Math.max(0, asNumber(value)) || null;
+        this.style.setProperty('--ig-row-start', this._rowStart ? this._rowStart.toString() : null);
+    }
+    get rowStart() {
+        return this._rowStart;
+    }
+    get fullscreen() {
+        return this._fullscreenController.fullscreen;
+    }
+    set maximized(value) {
+        this._maximized = value;
+        if (this._tileManagerCtx) {
+            this._tileManagerCtx.instance.requestUpdate();
+        }
+    }
+    get maximized() {
+        return this._maximized;
+    }
+    set position(value) {
+        this._position = asNumber(value);
+        this.style.order = this._position.toString();
+    }
+    get position() {
+        return this._position;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.id = this.id || `tile-${IgcTileComponent_1.increment()}`;
+        this.style.viewTransitionName =
+            this.style.viewTransitionName || `tile-transition-${this.id}`;
+    }
+    createRenderRoot() {
+        const root = super.createRenderRoot();
+        root.addEventListener('slotchange', () => this.requestUpdate());
+        return root;
+    }
+    _setDragState(state = true) {
+        this._isDragging = state;
+        this._tileContent.style.opacity = state ? '0' : '';
+        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(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
+                ? clientX > x || clientY > y
+                : clientX < x || clientY < y;
+            if (shouldSwap) {
+                this._dragStack.pop();
+                this._dragStack.push(match);
+                startViewTransition(() => {
+                    swapTiles(this, match);
+                });
+            }
+            return;
+        }
+        this._dragStack.push(match);
+        startViewTransition(() => {
+            swapTiles(this, 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 });
+    }
+    _skipDrag(event) {
+        if (this._maximized || this.fullscreen) {
+            return true;
+        }
+        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);
+        }
+        if (isHeightResize) {
+            state.current.height = this._resizeState.calculateSnappedHeight(state);
+        }
+    }
+    async _handleResizeEnd({ detail: { state }, }) {
+        const { colSpan, rowSpan } = this._resizeState.calculateResizedGridPosition(state.current);
+        await startViewTransition(() => {
+            this.colSpan = colSpan;
+            this.rowSpan = rowSpan;
+        }).transition?.updateCallbackDone;
+        this._setResizeState(false);
+    }
+    _handleResizeCancel() {
+        this._setResizeState(false);
+    }
+    _handleFullscreen() {
+        this._fullscreenController.setState(!this.fullscreen);
+    }
+    _handleMaximize() {
+        if (!this._emitMaximizedEvent()) {
+            return;
+        }
+        this.maximized = !this.maximized;
+    }
+    _emitFullScreenEvent(state) {
+        this.requestUpdate();
+        return this.emitEvent('igcTileFullscreen', {
+            detail: { tile: this, state },
+            cancelable: true,
+        });
+    }
+    _emitMaximizedEvent() {
+        return this.emitEvent('igcTileMaximize', {
+            detail: { tile: this, state: !this.maximized },
+            cancelable: true,
+        });
+    }
+    _emitTileDragStart() {
+        return this.emitEvent('igcTileDragStart', {
+            detail: this,
+            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() {
+        const hideHeader = isEmpty(this._titleElements) &&
+            isEmpty(this._actionsElements) &&
+            this.disableMaximize &&
+            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 && !this.fullscreen
+            ? 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"></slot>
+        </section>
+      </section>
+      <igc-divider></igc-divider>
+    `;
+    }
+    _renderContent() {
+        const parts = partNameMap({
+            base: true,
+            draggable: this._tileManager?.dragMode !== 'none',
+            fullscreen: this.fullscreen,
+            dragging: this._isDragging,
+            resizable: !this.disableResize && this._tileManager?.resizeMode !== 'none',
+            resizing: this._isResizing,
+            maximized: this.maximized,
+        });
+        return html `
+      <div part=${parts}>
+        ${this._renderHeader()}
+        <div part="content-container">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+    _renderAdornerSlot(name) {
+        return html `
+      <slot
+        @slotchange=${() => this._customAdorners.set(name, true)}
+        name="${name}-adorner"
+        slot="${name}-adorner"
+      >
+      </slot>
+    `;
+    }
+    render() {
+        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';
+IgcTileComponent.styles = [styles, shared];
+IgcTileComponent.increment = createCounter();
+__decorate([
+    queryAssignedElements({ slot: 'title' })
+], IgcTileComponent.prototype, "_titleElements", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'actions' })
+], IgcTileComponent.prototype, "_actionsElements", void 0);
+__decorate([
+    query(IgcResizeContainerComponent.tagName)
+], IgcTileComponent.prototype, "_resizeContainer", void 0);
+__decorate([
+    query('[part~="base"]', true)
+], IgcTileComponent.prototype, "_tileContent", void 0);
+__decorate([
+    state()
+], IgcTileComponent.prototype, "_maximized", void 0);
+__decorate([
+    state()
+], IgcTileComponent.prototype, "_isDragging", void 0);
+__decorate([
+    state()
+], IgcTileComponent.prototype, "_isResizing", void 0);
+__decorate([
+    property({ type: Number, attribute: 'col-span' })
+], IgcTileComponent.prototype, "colSpan", null);
+__decorate([
+    property({ type: Number, attribute: 'row-span' })
+], IgcTileComponent.prototype, "rowSpan", null);
+__decorate([
+    property({ type: Number, attribute: 'col-start' })
+], IgcTileComponent.prototype, "colStart", null);
+__decorate([
+    property({ type: Number, attribute: 'row-start' })
+], IgcTileComponent.prototype, "rowStart", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], IgcTileComponent.prototype, "maximized", 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);
+IgcTileComponent = IgcTileComponent_1 = __decorate([
+    themes(all)
+], IgcTileComponent);
+export default IgcTileComponent;
+//# sourceMappingURL=tile.js.map