igniteui-webcomponents 5.2.3 → 5.3.0-RC.0

package/components/common/context.js

@@ -0,0 +1,5 @@
+import { createContext } from '@lit/context';
+const carouselContext = createContext(Symbol('carousel-context'));
+const tileManagerContext = createContext(Symbol('tile-manager-context'));
+export { carouselContext, tileManagerContext };
+//# sourceMappingURL=context.js.map

package/components/common/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../../../src/components/common/context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAY7C,MAAM,eAAe,GAAG,aAAa,CACnC,MAAM,CAAC,kBAAkB,CAAC,CAC3B,CAAC;AAEF,MAAM,kBAAkB,GAAG,aAAa,CACtC,MAAM,CAAC,sBAAsB,CAAC,CAC/B,CAAC;AAEF,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,CAAC","sourcesContent":["import { createContext } from '@lit/context';\nimport type { Ref } from 'lit/directives/ref.js';\nimport type IgcCarouselComponent from '../carousel/carousel.js';\nimport type IgcTileManagerComponent from '../tile-manager/tile-manager.js';\n\nexport type TileManagerContext = {\n  /** The igc-tile-manager instance. */\n  instance: IgcTileManagerComponent;\n  /** The internal CSS grid container of the igc-tile-manager. */\n  grid: Ref<HTMLElement>;\n};\n\nconst carouselContext = createContext<IgcCarouselComponent>(\n  Symbol('carousel-context')\n);\n\nconst tileManagerContext = createContext<TileManagerContext>(\n  Symbol('tile-manager-context')\n);\n\nexport { carouselContext, tileManagerContext };\n"]}

package/components/common/controllers/async-consumer.d.ts

@@ -0,0 +1,17 @@
+import { type Context, ContextConsumer, type ContextType } from '@lit/context';
+import type { LitElement, ReactiveController, ReactiveControllerHost } from 'lit';
+type AsyncContextOptions<T extends Context<unknown, unknown>> = {
+    context: T;
+    callback?: (value: ContextType<T>, dispose?: () => void) => void;
+    subscribe?: boolean;
+};
+export declare class AsyncContextConsumer<T extends Context<unknown, unknown>, Host extends ReactiveControllerHost & HTMLElement> implements ReactiveController {
+    protected _host: Host;
+    protected _options: AsyncContextOptions<T>;
+    protected _consumer?: ContextConsumer<T, Host>;
+    constructor(host: Host, options: AsyncContextOptions<T>);
+    get value(): ContextType<T> | undefined;
+    hostConnected(): Promise<void>;
+}
+export declare function createAsyncContext<T extends Context<unknown, unknown>, Host extends ReactiveControllerHost & LitElement>(host: Host, context: T, callback?: (value: ContextType<T>, dispose?: () => void) => void): AsyncContextConsumer<T, Host>;
+export {};

package/components/common/controllers/async-consumer.js

@@ -0,0 +1,29 @@
+import { ContextConsumer } from '@lit/context';
+export class AsyncContextConsumer {
+    constructor(host, options) {
+        this._host = host;
+        this._options = options;
+        this._host.addController(this);
+    }
+    get value() {
+        return this._consumer?.value;
+    }
+    async hostConnected() {
+        await this._host.updateComplete;
+        if (!this._consumer) {
+            this._consumer = new ContextConsumer(this._host, {
+                context: this._options.context,
+                callback: this._options.callback,
+                subscribe: this._options.subscribe,
+            });
+        }
+    }
+}
+export function createAsyncContext(host, context, callback) {
+    return new AsyncContextConsumer(host, {
+        context,
+        callback,
+        subscribe: true,
+    });
+}
+//# sourceMappingURL=async-consumer.js.map

package/components/common/controllers/async-consumer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"async-consumer.js","sourceRoot":"","sources":["../../../../src/components/common/controllers/async-consumer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,eAAe,EAAoB,MAAM,cAAc,CAAC;AAc/E,MAAM,OAAO,oBAAoB;IAS/B,YAAY,IAAU,EAAE,OAA+B;QACrD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;QAExB,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IACjC,CAAC;IAED,IAAW,KAAK;QACd,OAAO,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC;IAC/B,CAAC;IAEM,KAAK,CAAC,aAAa;QACxB,MAAM,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC;QAIhC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YACpB,IAAI,CAAC,SAAS,GAAG,IAAI,eAAe,CAAC,IAAI,CAAC,KAAK,EAAE;gBAC/C,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO;gBAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,QAAQ;gBAChC,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,SAAS;aACnC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;CACF;AAED,MAAM,UAAU,kBAAkB,CAIhC,IAAU,EACV,OAAU,EACV,QAAgE;IAEhE,OAAO,IAAI,oBAAoB,CAAC,IAAI,EAAE;QACpC,OAAO;QACP,QAAQ;QACR,SAAS,EAAE,IAAI;KAChB,CAAkC,CAAC;AACtC,CAAC","sourcesContent":["import { type Context, ContextConsumer, type ContextType } from '@lit/context';\nimport type {\n  LitElement,\n  ReactiveController,\n  ReactiveControllerHost,\n} from 'lit';\n\ntype AsyncContextOptions<T extends Context<unknown, unknown>> = {\n  context: T;\n  callback?: (value: ContextType<T>, dispose?: () => void) => void;\n  subscribe?: boolean;\n};\n\n/* blazorSuppress */\nexport class AsyncContextConsumer<\n  T extends Context<unknown, unknown>,\n  Host extends ReactiveControllerHost & HTMLElement,\n> implements ReactiveController\n{\n  protected _host: Host;\n  protected _options: AsyncContextOptions<T>;\n  protected _consumer?: ContextConsumer<T, Host>;\n\n  constructor(host: Host, options: AsyncContextOptions<T>) {\n    this._host = host;\n    this._options = options;\n\n    this._host.addController(this);\n  }\n\n  public get value(): ContextType<T> | undefined {\n    return this._consumer?.value;\n  }\n\n  public async hostConnected(): Promise<void> {\n    await this._host.updateComplete;\n\n    // If there is already an instance of a consumer (because of an attach/detach cycle),\n    // skip creating a new instance for this host.\n    if (!this._consumer) {\n      this._consumer = new ContextConsumer(this._host, {\n        context: this._options.context,\n        callback: this._options.callback,\n        subscribe: this._options.subscribe,\n      });\n    }\n  }\n}\n\nexport function createAsyncContext<\n  T extends Context<unknown, unknown>,\n  Host extends ReactiveControllerHost & LitElement,\n>(\n  host: Host,\n  context: T,\n  callback?: (value: ContextType<T>, dispose?: () => void) => void\n): AsyncContextConsumer<T, Host> {\n  return new AsyncContextConsumer(host, {\n    context,\n    callback,\n    subscribe: true,\n  }) as AsyncContextConsumer<T, Host>;\n}\n"]}

package/components/common/controllers/drag.d.ts

@@ -0,0 +1,142 @@
+import type { LitElement, ReactiveController, ReactiveControllerHost } from 'lit';
+import type { Ref } from 'lit/directives/ref.js';
+type DragCallback = (parameters: DragCallbackParameters) => unknown;
+type DragCancelCallback = (state: DragState) => unknown;
+export type DragCallbackParameters = {
+    event: PointerEvent;
+    state: DragState;
+};
+type State = {
+    initial: DOMRect;
+    current: DOMRect;
+    position: {
+        x: number;
+        y: number;
+    };
+    offset: {
+        x: number;
+        y: number;
+    };
+};
+type DragState = State & {
+    ghost: HTMLElement | null;
+    element: Element | null;
+};
+type DragControllerConfiguration = {
+    /** Whether the drag feature is enabled for the current host. */
+    enabled?: boolean;
+    /**
+     * The mode of the drag operation.
+     *
+     * Deferred will create a ghost element and keep the original element
+     * at its place until the operation completes successfully.
+     */
+    mode?: 'immediate' | 'deferred';
+    /**
+     * Whether starting a drag operation should snap the dragged item's top left corner
+     * to the cursor position.
+     */
+    snapToCursor?: boolean;
+    /**
+     * Guard function invoked during the `start` callback.
+     * Returning a truthy value will stop the current drag operation.
+     */
+    skip?: (event: PointerEvent) => boolean;
+    matchTarget?: (target: Element) => boolean;
+    /**
+     *
+     */
+    trigger?: () => HTMLElement;
+    /**
+     * Contain drag operations to the scope of the passed DOM element.
+     */
+    container?: Ref<HTMLElement>;
+    /**
+     * The DOM element that will "host" the ghost drag element when the controller
+     * is set to **deferred**.
+     *
+     * @remarks
+     * In **immediate** mode, this property is ignored.
+     */
+    layer?: () => HTMLElement;
+    ghost?: () => HTMLElement;
+    /** Callback invoked at the beginning of a drag operation. */
+    start?: DragCallback;
+    /** Callback invoked while dragging the target element.  */
+    move?: DragCallback;
+    enter?: DragCallback;
+    leave?: DragCallback;
+    over?: DragCallback;
+    /** Callback invoked during a drop operation. */
+    end?: DragCallback;
+    /** Callback invoked when a drag is cancelled */
+    cancel?: DragCancelCallback;
+};
+declare class DragController implements ReactiveController {
+    private _host;
+    private _options;
+    private _state;
+    private _matchedElement;
+    private _id;
+    private _hasPointerCapture;
+    private _ghost;
+    /** Whether `snapToCursor` is enabled for the controller. */
+    private get _hasSnapping();
+    /** Whether the current drag mode is deferred. */
+    private get _isDeferred();
+    /**
+     * The source element which will capture pointer events and initiate drag mode.
+     *
+     * @remarks
+     * By default that will be the host element itself, unless `trigger` is passed in.
+     */
+    private get _element();
+    /**
+     * The element being dragged.
+     *
+     * @remarks
+     * When in **deferred** mode this returns a reference to the drag ghost element,
+     * otherwise it is the host element.
+     */
+    private get _dragItem();
+    /**
+     * The DOM element that will "host" the ghost drag element when the controller
+     * is set to **deferred**.
+     *
+     * @remarks
+     * In **immediate** mode, this property is ignored.
+     */
+    private get _layer();
+    private get _stateParameters();
+    constructor(host: ReactiveControllerHost & LitElement, options?: DragControllerConfiguration);
+    /** Whether the drag controller is enabled. */
+    get enabled(): boolean;
+    /** Updates the drag controller configuration. */
+    set(options?: DragControllerConfiguration): void;
+    /** Stops any drag operation and cleans up state, additional event listeners and elements. */
+    dispose(): void;
+    /** @internal */
+    hostConnected(): void;
+    /** @internal */
+    hostDisconnected(): void;
+    /** @internal */
+    handleEvent(event: PointerEvent & KeyboardEvent): void;
+    private _handlePointerDown;
+    private _handlePointerMove;
+    private _handlePointerEnd;
+    private _handleCancel;
+    private _setDragCancelListener;
+    private _setInitialState;
+    private _setDragState;
+    private _updateMatcher;
+    private _updatePosition;
+    private _assignPosition;
+    private _createDragGhost;
+    private _removeGhost;
+    private _shouldSkip;
+}
+/**
+ * Adds a drag and drop controller to the given host
+ */
+export declare function addDragController(host: ReactiveControllerHost & LitElement, options?: DragControllerConfiguration): DragController;
+export {};

package/components/common/controllers/drag.js

@@ -0,0 +1,239 @@
+import { getDefaultLayer } from '../../resize-container/default-ghost.js';
+import { findElementFromEventPath, getRoot, roundByDPR } from '../util.js';
+const additionalEvents = ['pointermove', 'lostpointercapture'];
+class DragController {
+    get _hasSnapping() {
+        return Boolean(this._options.snapToCursor);
+    }
+    get _isDeferred() {
+        return this._options.mode === 'deferred';
+    }
+    get _element() {
+        return this._options.trigger?.() ?? this._host;
+    }
+    get _dragItem() {
+        return this._isDeferred ? this._ghost : this._host;
+    }
+    get _layer() {
+        if (!this._isDeferred) {
+            return this._host;
+        }
+        return this._options.layer?.() ?? this._host;
+    }
+    get _stateParameters() {
+        return {
+            ...this._state,
+            ghost: this._ghost,
+            element: this._matchedElement,
+        };
+    }
+    constructor(host, options) {
+        this._options = {
+            enabled: true,
+            mode: 'deferred',
+            snapToCursor: false,
+            layer: getDefaultLayer,
+        };
+        this._id = -1;
+        this._hasPointerCapture = false;
+        this._ghost = null;
+        this._host = host;
+        this._host.addController(this);
+        this.set(options);
+    }
+    get enabled() {
+        return Boolean(this._options.enabled);
+    }
+    set(options) {
+        Object.assign(this._options, options);
+    }
+    dispose() {
+        this._matchedElement = null;
+        this._removeGhost();
+        this._setDragState(false);
+    }
+    hostConnected() {
+        this._host.addEventListener('dragstart', this);
+        this._host.addEventListener('touchstart', this, { passive: false });
+        this._host.addEventListener('pointerdown', this);
+    }
+    hostDisconnected() {
+        this._host.removeEventListener('dragstart', this);
+        this._host.removeEventListener('touchstart', this);
+        this._host.removeEventListener('pointerdown', this);
+        this._setDragCancelListener(false);
+        this._removeGhost();
+    }
+    handleEvent(event) {
+        if (!this.enabled) {
+            return;
+        }
+        switch (event.type) {
+            case 'touchstart':
+            case 'dragstart':
+                event.preventDefault();
+                break;
+            case 'keydown':
+                this._handleCancel(event);
+                break;
+            case 'pointerdown':
+                this._handlePointerDown(event);
+                break;
+            case 'pointermove':
+                this._handlePointerMove(event);
+                break;
+            case 'lostpointercapture':
+                this._handlePointerEnd(event);
+                break;
+        }
+    }
+    _handlePointerDown(event) {
+        if (this._shouldSkip(event)) {
+            return;
+        }
+        this._setInitialState(event);
+        this._createDragGhost();
+        this._updatePosition(event);
+        const parameters = { event, state: this._stateParameters };
+        if (this._options.start?.call(this._host, parameters) === false) {
+            this._removeGhost();
+            return;
+        }
+        this._assignPosition(this._dragItem);
+        this._setDragState();
+    }
+    _handlePointerMove(event) {
+        if (!this._hasPointerCapture) {
+            return;
+        }
+        this._updatePosition(event);
+        this._updateMatcher(event);
+        const parameters = { event, state: this._stateParameters };
+        this._options.move?.call(this._host, parameters);
+        this._assignPosition(this._dragItem);
+    }
+    _handlePointerEnd(event) {
+        this._options.end?.call(this._host, {
+            event,
+            state: this._stateParameters,
+        });
+        this.dispose();
+    }
+    _handleCancel(event) {
+        const key = event.key.toLowerCase();
+        if (this._hasPointerCapture && key === 'escape') {
+            this._options.cancel?.call(this._host, this._stateParameters);
+        }
+    }
+    _setDragCancelListener(enabled = true) {
+        enabled
+            ? globalThis.addEventListener('keydown', this)
+            : globalThis.removeEventListener('keydown', this);
+    }
+    _setInitialState({ pointerId, clientX, clientY, }) {
+        const rect = this._host.getBoundingClientRect();
+        const position = { x: rect.x, y: rect.y };
+        const offset = { x: rect.x - clientX, y: rect.y - clientY };
+        this._id = pointerId;
+        this._state = {
+            initial: rect,
+            current: structuredClone(rect),
+            position,
+            offset,
+        };
+    }
+    _setDragState(enabled = true) {
+        this._hasPointerCapture = enabled;
+        const cssValue = enabled ? 'none' : '';
+        Object.assign(this._element.style, {
+            touchAction: cssValue,
+            userSelect: cssValue,
+        });
+        enabled
+            ? this._element.setPointerCapture(this._id)
+            : this._element.releasePointerCapture(this._id);
+        this._setDragCancelListener(enabled);
+        for (const type of additionalEvents) {
+            enabled
+                ? this._host.addEventListener(type, this)
+                : this._host.removeEventListener(type, this);
+        }
+    }
+    _updateMatcher(event) {
+        if (!this._options.matchTarget) {
+            return;
+        }
+        const match = getRoot(this._host)
+            .elementsFromPoint(event.clientX, event.clientY)
+            .find((element) => this._options.matchTarget.call(this._host, element));
+        if (match && !this._matchedElement) {
+            this._matchedElement = match;
+            this._options.enter?.call(this._host, {
+                event,
+                state: this._stateParameters,
+            });
+            return;
+        }
+        if (!match && this._matchedElement) {
+            this._options.leave?.call(this._host, {
+                event,
+                state: this._stateParameters,
+            });
+            this._matchedElement = null;
+            return;
+        }
+        if (match && match === this._matchedElement) {
+            this._options.over?.call(this._host, {
+                event,
+                state: this._stateParameters,
+            });
+        }
+    }
+    _updatePosition({ clientX, clientY }) {
+        const { x, y } = this._state.offset;
+        const { x: layerX, y: layerY } = this._isDeferred
+            ? this._layer.getBoundingClientRect()
+            : this._state.initial;
+        const posX = this._hasSnapping ? clientX - layerX : clientX - layerX + x;
+        const posY = this._hasSnapping ? clientY - layerY : clientY - layerY + y;
+        Object.assign(this._state.position, { x: posX, y: posY });
+    }
+    _assignPosition(element) {
+        element.style.transform = `translate3d(${roundByDPR(this._state.position.x)}px,${roundByDPR(this._state.position.y)}px,0)`;
+    }
+    _createDragGhost() {
+        if (!this._isDeferred) {
+            return;
+        }
+        this._ghost =
+            this._options.ghost?.call(this._host) ??
+                createDefaultDragGhost(this._host.getBoundingClientRect());
+        this._layer.append(this._ghost);
+    }
+    _removeGhost() {
+        this._ghost?.remove();
+        this._ghost = null;
+    }
+    _shouldSkip(event) {
+        return (Boolean(event.button) ||
+            this._options.skip?.call(this._host, event) ||
+            !findElementFromEventPath((e) => e === this._element, event));
+    }
+}
+function createDefaultDragGhost({ x, y, width, height }) {
+    const element = document.createElement('div');
+    Object.assign(element.style, {
+        position: 'absolute',
+        left: `${x}px`,
+        top: `${y}px`,
+        width: `${width}px`,
+        height: `${height}px`,
+        zIndex: 1000,
+        background: 'gold',
+    });
+    return element;
+}
+export function addDragController(host, options) {
+    return new DragController(host, options);
+}
+//# sourceMappingURL=drag.js.map

package/components/common/controllers/drag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drag.js","sourceRoot":"","sources":["../../../../src/components/common/controllers/drag.ts"],"names":[],"mappings":"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","sourcesContent":["import type {\n  LitElement,\n  ReactiveController,\n  ReactiveControllerHost,\n} from 'lit';\nimport type { Ref } from 'lit/directives/ref.js';\n\nimport { getDefaultLayer } from '../../resize-container/default-ghost.js';\nimport { findElementFromEventPath, getRoot, roundByDPR } from '../util.js';\n\ntype DragCallback = (parameters: DragCallbackParameters) => unknown;\ntype DragCancelCallback = (state: DragState) => unknown;\n\nexport type DragCallbackParameters = {\n  event: PointerEvent;\n  state: DragState;\n};\n\ntype State = {\n  initial: DOMRect;\n  current: DOMRect;\n  position: { x: number; y: number };\n  offset: { x: number; y: number };\n};\n\ntype DragState = State & {\n  ghost: HTMLElement | null;\n  element: Element | null;\n};\n\ntype DragControllerConfiguration = {\n  /** Whether the drag feature is enabled for the current host. */\n  enabled?: boolean;\n  /**\n   * The mode of the drag operation.\n   *\n   * Deferred will create a ghost element and keep the original element\n   * at its place until the operation completes successfully.\n   */\n  mode?: 'immediate' | 'deferred';\n  /**\n   * Whether starting a drag operation should snap the dragged item's top left corner\n   * to the cursor position.\n   */\n  snapToCursor?: boolean;\n  /**\n   * Guard function invoked during the `start` callback.\n   * Returning a truthy value will stop the current drag operation.\n   */\n  skip?: (event: PointerEvent) => boolean;\n\n  matchTarget?: (target: Element) => boolean;\n  /**\n   *\n   */\n  trigger?: () => HTMLElement;\n  /**\n   * Contain drag operations to the scope of the passed DOM element.\n   */\n  container?: Ref<HTMLElement>;\n  /**\n   * The DOM element that will \"host\" the ghost drag element when the controller\n   * is set to **deferred**.\n   *\n   * @remarks\n   * In **immediate** mode, this property is ignored.\n   */\n  layer?: () => HTMLElement;\n\n  ghost?: () => HTMLElement;\n\n  /** Callback invoked at the beginning of a drag operation. */\n  start?: DragCallback;\n  /** Callback invoked while dragging the target element.  */\n  move?: DragCallback;\n\n  enter?: DragCallback;\n\n  leave?: DragCallback;\n\n  over?: DragCallback;\n\n  /** Callback invoked during a drop operation. */\n  end?: DragCallback;\n  /** Callback invoked when a drag is cancelled */\n  cancel?: DragCancelCallback;\n};\n\nconst additionalEvents = ['pointermove', 'lostpointercapture'] as const;\n\nclass DragController implements ReactiveController {\n  private _host: ReactiveControllerHost & LitElement;\n  private _options: DragControllerConfiguration = {\n    enabled: true,\n    mode: 'deferred',\n    snapToCursor: false,\n    layer: getDefaultLayer,\n  };\n\n  private _state!: State;\n\n  private _matchedElement!: Element | null;\n\n  private _id = -1;\n  private _hasPointerCapture = false;\n\n  private _ghost: HTMLElement | null = null;\n\n  /** Whether `snapToCursor` is enabled for the controller. */\n  private get _hasSnapping(): boolean {\n    return Boolean(this._options.snapToCursor);\n  }\n\n  /** Whether the current drag mode is deferred. */\n  private get _isDeferred(): boolean {\n    return this._options.mode === 'deferred';\n  }\n\n  /**\n   * The source element which will capture pointer events and initiate drag mode.\n   *\n   * @remarks\n   * By default that will be the host element itself, unless `trigger` is passed in.\n   */\n  private get _element(): HTMLElement {\n    return this._options.trigger?.() ?? this._host;\n  }\n\n  /**\n   * The element being dragged.\n   *\n   * @remarks\n   * When in **deferred** mode this returns a reference to the drag ghost element,\n   * otherwise it is the host element.\n   */\n  private get _dragItem(): HTMLElement {\n    return this._isDeferred ? this._ghost! : this._host;\n  }\n\n  /**\n   * The DOM element that will \"host\" the ghost drag element when the controller\n   * is set to **deferred**.\n   *\n   * @remarks\n   * In **immediate** mode, this property is ignored.\n   */\n  private get _layer(): HTMLElement {\n    if (!this._isDeferred) {\n      return this._host;\n    }\n\n    return this._options.layer?.() ?? this._host;\n  }\n\n  private get _stateParameters(): DragState {\n    return {\n      ...this._state,\n      ghost: this._ghost,\n      element: this._matchedElement,\n    };\n  }\n\n  constructor(\n    host: ReactiveControllerHost & LitElement,\n    options?: DragControllerConfiguration\n  ) {\n    this._host = host;\n    this._host.addController(this);\n    this.set(options);\n  }\n\n  // #region Public API\n\n  /** Whether the drag controller is enabled. */\n  public get enabled(): boolean {\n    return Boolean(this._options.enabled);\n  }\n\n  /** Updates the drag controller configuration. */\n  public set(options?: DragControllerConfiguration): void {\n    Object.assign(this._options, options);\n  }\n\n  /** Stops any drag operation and cleans up state, additional event listeners and elements. */\n  public dispose(): void {\n    this._matchedElement = null;\n    this._removeGhost();\n    this._setDragState(false);\n  }\n\n  /** @internal */\n  public hostConnected(): void {\n    this._host.addEventListener('dragstart', this);\n    this._host.addEventListener('touchstart', this, { passive: false });\n    this._host.addEventListener('pointerdown', this);\n  }\n\n  /** @internal */\n  public hostDisconnected(): void {\n    this._host.removeEventListener('dragstart', this);\n    this._host.removeEventListener('touchstart', this);\n    this._host.removeEventListener('pointerdown', this);\n    this._setDragCancelListener(false);\n    this._removeGhost();\n  }\n\n  /** @internal */\n  public handleEvent(event: PointerEvent & KeyboardEvent): void {\n    if (!this.enabled) {\n      return;\n    }\n\n    switch (event.type) {\n      case 'touchstart':\n      case 'dragstart':\n        event.preventDefault();\n        break;\n      case 'keydown':\n        this._handleCancel(event);\n        break;\n      case 'pointerdown':\n        this._handlePointerDown(event);\n        break;\n      case 'pointermove':\n        this._handlePointerMove(event);\n        break;\n      case 'lostpointercapture':\n        this._handlePointerEnd(event);\n        break;\n    }\n  }\n\n  // #endregion\n\n  // #region Event handlers\n\n  private _handlePointerDown(event: PointerEvent): void {\n    if (this._shouldSkip(event)) {\n      return;\n    }\n\n    this._setInitialState(event);\n    this._createDragGhost();\n    this._updatePosition(event);\n\n    const parameters = { event, state: this._stateParameters };\n    if (this._options.start?.call(this._host, parameters) === false) {\n      this._removeGhost();\n      return;\n    }\n\n    this._assignPosition(this._dragItem);\n    this._setDragState();\n  }\n\n  private _handlePointerMove(event: PointerEvent): void {\n    if (!this._hasPointerCapture) {\n      return;\n    }\n\n    this._updatePosition(event);\n    this._updateMatcher(event);\n\n    const parameters = { event, state: this._stateParameters };\n    this._options.move?.call(this._host, parameters);\n\n    this._assignPosition(this._dragItem);\n  }\n\n  private _handlePointerEnd(event: PointerEvent): void {\n    this._options.end?.call(this._host, {\n      event,\n      state: this._stateParameters,\n    });\n    this.dispose();\n  }\n\n  private _handleCancel(event: KeyboardEvent): void {\n    const key = event.key.toLowerCase();\n\n    if (this._hasPointerCapture && key === 'escape') {\n      // Reset state\n      this._options.cancel?.call(this._host, this._stateParameters);\n    }\n  }\n\n  // #endregion\n\n  private _setDragCancelListener(enabled = true): void {\n    enabled\n      ? globalThis.addEventListener('keydown', this)\n      : globalThis.removeEventListener('keydown', this);\n  }\n\n  private _setInitialState({\n    pointerId,\n    clientX,\n    clientY,\n  }: PointerEvent): void {\n    const rect = this._host.getBoundingClientRect();\n    const position = { x: rect.x, y: rect.y };\n    const offset = { x: rect.x - clientX, y: rect.y - clientY };\n\n    this._id = pointerId;\n    this._state = {\n      initial: rect,\n      current: structuredClone(rect),\n      position,\n      offset,\n    };\n  }\n\n  private _setDragState(enabled = true): void {\n    this._hasPointerCapture = enabled;\n    const cssValue = enabled ? 'none' : '';\n\n    Object.assign(this._element.style, {\n      touchAction: cssValue,\n      userSelect: cssValue,\n    });\n\n    enabled\n      ? this._element.setPointerCapture(this._id)\n      : this._element.releasePointerCapture(this._id);\n\n    this._setDragCancelListener(enabled);\n\n    // Toggle additional events\n    for (const type of additionalEvents) {\n      enabled\n        ? this._host.addEventListener(type, this)\n        : this._host.removeEventListener(type, this);\n    }\n  }\n\n  private _updateMatcher(event: PointerEvent) {\n    if (!this._options.matchTarget) {\n      return;\n    }\n\n    const match = getRoot(this._host)\n      .elementsFromPoint(event.clientX, event.clientY)\n      .find((element) => this._options.matchTarget!.call(this._host, element));\n\n    if (match && !this._matchedElement) {\n      this._matchedElement = match;\n      this._options.enter?.call(this._host, {\n        event,\n        state: this._stateParameters,\n      });\n      return;\n    }\n\n    if (!match && this._matchedElement) {\n      this._options.leave?.call(this._host, {\n        event,\n        state: this._stateParameters,\n      });\n      this._matchedElement = null;\n      return;\n    }\n\n    if (match && match === this._matchedElement) {\n      this._options.over?.call(this._host, {\n        event,\n        state: this._stateParameters,\n      });\n    }\n  }\n\n  private _updatePosition({ clientX, clientY }: PointerEvent): void {\n    const { x, y } = this._state.offset;\n    const { x: layerX, y: layerY } = this._isDeferred\n      ? this._layer.getBoundingClientRect()\n      : this._state.initial;\n\n    const posX = this._hasSnapping ? clientX - layerX : clientX - layerX + x;\n    const posY = this._hasSnapping ? clientY - layerY : clientY - layerY + y;\n\n    Object.assign(this._state.position, { x: posX, y: posY });\n  }\n\n  private _assignPosition(element: HTMLElement): void {\n    element.style.transform = `translate3d(${roundByDPR(this._state.position.x)}px,${roundByDPR(this._state.position.y)}px,0)`;\n  }\n\n  private _createDragGhost(): void {\n    if (!this._isDeferred) {\n      return;\n    }\n\n    this._ghost =\n      this._options.ghost?.call(this._host) ??\n      createDefaultDragGhost(this._host.getBoundingClientRect());\n\n    this._layer.append(this._ghost);\n  }\n\n  private _removeGhost(): void {\n    this._ghost?.remove();\n    this._ghost = null;\n  }\n\n  private _shouldSkip(event: PointerEvent): boolean {\n    return (\n      Boolean(event.button) ||\n      this._options.skip?.call(this._host, event) ||\n      !findElementFromEventPath((e) => e === this._element, event)\n    );\n  }\n}\n\nfunction createDefaultDragGhost({ x, y, width, height }: DOMRect): HTMLElement {\n  const element = document.createElement('div');\n\n  Object.assign(element.style, {\n    position: 'absolute',\n    left: `${x}px`,\n    top: `${y}px`,\n    width: `${width}px`,\n    height: `${height}px`,\n    zIndex: 1000,\n    background: 'gold',\n  });\n\n  return element;\n}\n\n/**\n * Adds a drag and drop controller to the given host\n */\nexport function addDragController(\n  host: ReactiveControllerHost & LitElement,\n  options?: DragControllerConfiguration\n): DragController {\n  return new DragController(host, options);\n}\n"]}

package/components/common/controllers/fullscreen.d.ts

@@ -0,0 +1,41 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+/**
+ * Callback invoked when the host element is about to enter/leave fullscreen mode.
+ *
+ * The callback is passed the current fullscreen `state`.
+ * Returning a falsy value from the callback will stop the current fullscreen state change.
+ */
+type FullscreenControllerCallback = (state: boolean) => boolean;
+/** Configuration object for the fullscreen controller. */
+type FullscreenControllerConfiguration = {
+    /**
+     * Invoked when the host element is entering fullscreen mode.
+     * See the {@link FullscreenControllerCallback} for details.
+     */
+    enter?: FullscreenControllerCallback;
+    /**
+     * Invoked when the host element is leaving fullscreen mode.
+     * See the {@link FullscreenControllerCallback} for details.
+     */
+    exit?: FullscreenControllerCallback;
+};
+declare class FullscreenController implements ReactiveController {
+    private _host;
+    private _options;
+    private _fullscreen;
+    get fullscreen(): boolean;
+    constructor(host: ReactiveControllerHost & HTMLElement, options?: FullscreenControllerConfiguration);
+    /**
+     * Transitions the host element to/from fullscreen mode.
+     * This method **will invoke** enter/exit callbacks if present.
+     */
+    setState(fullscreen: boolean): void;
+    /** @internal */
+    handleEvent(): void;
+    /** @internal */
+    hostConnected(): void;
+    /** @internal */
+    hostDisconnected(): void;
+}
+export declare function addFullscreenController(host: ReactiveControllerHost & HTMLElement, options?: FullscreenControllerConfiguration): FullscreenController;
+export {};

package/components/common/controllers/fullscreen.js

@@ -0,0 +1,40 @@
+class FullscreenController {
+    get fullscreen() {
+        return this._fullscreen;
+    }
+    constructor(host, options) {
+        this._options = {};
+        this._fullscreen = false;
+        this._host = host;
+        Object.assign(this._options, options);
+        host.addController(this);
+    }
+    setState(fullscreen) {
+        const callback = fullscreen ? this._options.enter : this._options.exit;
+        if (callback && !callback.call(this._host, fullscreen)) {
+            return;
+        }
+        this._fullscreen = fullscreen;
+        if (this._fullscreen) {
+            this._host.requestFullscreen();
+        }
+        else if (document.fullscreenElement) {
+            document.exitFullscreen();
+        }
+    }
+    handleEvent() {
+        if (!document.fullscreenElement && this._fullscreen) {
+            this.setState(false);
+        }
+    }
+    hostConnected() {
+        this._host.addEventListener('fullscreenchange', this);
+    }
+    hostDisconnected() {
+        this._host.removeEventListener('fullscreenchange', this);
+    }
+}
+export function addFullscreenController(host, options) {
+    return new FullscreenController(host, options);
+}
+//# sourceMappingURL=fullscreen.js.map

package/components/common/controllers/fullscreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fullscreen.js","sourceRoot":"","sources":["../../../../src/components/common/controllers/fullscreen.ts"],"names":[],"mappings":"AAwBA,MAAM,oBAAoB;IAMxB,IAAW,UAAU;QACnB,OAAO,IAAI,CAAC,WAAW,CAAC;IAC1B,CAAC;IAED,YACE,IAA0C,EAC1C,OAA2C;QAVrC,aAAQ,GAAsC,EAAE,CAAC;QAEjD,gBAAW,GAAG,KAAK,CAAC;QAU1B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;QACtC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC;IAMM,QAAQ,CAAC,UAAmB;QACjC,MAAM,QAAQ,GAAG,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;QAEvE,IAAI,QAAQ,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,UAAU,CAAC,EAAE,CAAC;YACvD,OAAO;QACT,CAAC;QAED,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC;QAE9B,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,IAAI,CAAC,KAAK,CAAC,iBAAiB,EAAE,CAAC;QACjC,CAAC;aAAM,IAAI,QAAQ,CAAC,iBAAiB,EAAE,CAAC;YACtC,QAAQ,CAAC,cAAc,EAAE,CAAC;QAC5B,CAAC;IACH,CAAC;IAGM,WAAW;QAChB,IAAI,CAAC,QAAQ,CAAC,iBAAiB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACpD,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC;IACH,CAAC;IAGM,aAAa;QAClB,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,IAAI,CAAC,CAAC;IACxD,CAAC;IAGM,gBAAgB;QACrB,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,kBAAkB,EAAE,IAAI,CAAC,CAAC;IAC3D,CAAC;CACF;AAED,MAAM,UAAU,uBAAuB,CACrC,IAA0C,EAC1C,OAA2C;IAE3C,OAAO,IAAI,oBAAoB,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;AACjD,CAAC","sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\n\n/**\n * Callback invoked when the host element is about to enter/leave fullscreen mode.\n *\n * The callback is passed the current fullscreen `state`.\n * Returning a falsy value from the callback will stop the current fullscreen state change.\n */\ntype FullscreenControllerCallback = (state: boolean) => boolean;\n\n/** Configuration object for the fullscreen controller. */\ntype FullscreenControllerConfiguration = {\n  /**\n   * Invoked when the host element is entering fullscreen mode.\n   * See the {@link FullscreenControllerCallback} for details.\n   */\n  enter?: FullscreenControllerCallback;\n  /**\n   * Invoked when the host element is leaving fullscreen mode.\n   * See the {@link FullscreenControllerCallback} for details.\n   */\n  exit?: FullscreenControllerCallback;\n};\n\nclass FullscreenController implements ReactiveController {\n  private _host: ReactiveControllerHost & HTMLElement;\n  private _options: FullscreenControllerConfiguration = {};\n\n  private _fullscreen = false;\n\n  public get fullscreen(): boolean {\n    return this._fullscreen;\n  }\n\n  constructor(\n    host: ReactiveControllerHost & HTMLElement,\n    options?: FullscreenControllerConfiguration\n  ) {\n    this._host = host;\n    Object.assign(this._options, options);\n    host.addController(this);\n  }\n\n  /**\n   * Transitions the host element to/from fullscreen mode.\n   * This method **will invoke** enter/exit callbacks if present.\n   */\n  public setState(fullscreen: boolean): void {\n    const callback = fullscreen ? this._options.enter : this._options.exit;\n\n    if (callback && !callback.call(this._host, fullscreen)) {\n      return;\n    }\n\n    this._fullscreen = fullscreen;\n\n    if (this._fullscreen) {\n      this._host.requestFullscreen();\n    } else if (document.fullscreenElement) {\n      document.exitFullscreen();\n    }\n  }\n\n  /** @internal */\n  public handleEvent(): void {\n    if (!document.fullscreenElement && this._fullscreen) {\n      this.setState(false);\n    }\n  }\n\n  /** @internal */\n  public hostConnected(): void {\n    this._host.addEventListener('fullscreenchange', this);\n  }\n\n  /** @internal */\n  public hostDisconnected(): void {\n    this._host.removeEventListener('fullscreenchange', this);\n  }\n}\n\nexport function addFullscreenController(\n  host: ReactiveControllerHost & HTMLElement,\n  options?: FullscreenControllerConfiguration\n): FullscreenController {\n  return new FullscreenController(host, options);\n}\n"]}

package/components/common/definitions/defineAllComponents.js

@@ -60,6 +60,8 @@ import IgcTabPanelComponent from '../../tabs/tab-panel.js';
 import IgcTabComponent from '../../tabs/tab.js';
 import IgcTabsComponent from '../../tabs/tabs.js';
 import IgcTextareaComponent from '../../textarea/textarea.js';
+import IgcTileManagerComponent from '../../tile-manager/tile-manager.js';
+import IgcTileComponent from '../../tile-manager/tile.js';
 import IgcToastComponent from '../../toast/toast.js';
 import IgcTreeItemComponent from '../../tree/tree-item.js';
 import IgcTreeComponent from '../../tree/tree.js';
@@ -130,6 +132,8 @@ const allComponents = [
     IgcStepperComponent,
     IgcStepComponent,
     IgcTextareaComponent,
+    IgcTileComponent,
+    IgcTileManagerComponent,
 ];
 export function defineAllComponents() {
     defineComponents(...allComponents);