feat: Tile manager component

Closes #1379

Author: mtsvyatkova

CHANGELOG.md

@@ -6,6 +6,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
 ### Added
+- Tile manager component [#1402](https://github.com/IgniteUI/igniteui-webcomponents/pull/1402)
 - #### List
   - The `igc-list-item` component exposes a new `selected` property. When set on a list item, the item will become visually highlighted.
 

package-lock.json

@@ -79,7 +79,7 @@
     "globby": "^14.1.0",
     "husky": "^9.1.7",
     "ig-typedoc-theme": "^6.0.0",
-    "igniteui-theming": "^16.0.0",
+    "igniteui-theming": "^16.1.0",
     "keep-a-changelog": "^2.6.1",
     "lint-staged": "^15.4.3",
     "lit-analyzer": "^2.0.3",

package.json

@@ -85,3 +85,19 @@ export function addAnimationController(
 ) {
   return new AnimationController(host, target);
 }
+
+type ViewTransitionResult = {
+  transition?: ViewTransition;
+};
+
+export function startViewTransition(
+  callback?: ViewTransitionUpdateCallback
+): ViewTransitionResult {
+  /* c8 ignore next 4 */
+  if (getPrefersReducedMotion() || !document.startViewTransition) {
+    callback?.();
+    return {};
+  }
+
+  return { transition: document.startViewTransition(callback) };
+}

src/animations/player.ts

@@ -2,10 +2,10 @@ import { consume } from '@lit/context';
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
+import { carouselContext } from '../common/context.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { formatString } from '../common/util.js';
 import type IgcCarouselComponent from './carousel.js';
-import { carouselContext } from './context.js';
 import { styles } from './themes/carousel-indicator.base.css.js';
 
 /**

src/components/carousel/carousel-indicator.ts

@@ -4,11 +4,11 @@ import { property } from 'lit/decorators.js';
 
 import { EaseInOut } from '../../animations/easings.js';
 import { addAnimationController } from '../../animations/player.js';
+import { carouselContext } from '../common/context.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { createCounter, formatString } from '../common/util.js';
 import { animations } from './animations.js';
 import type IgcCarouselComponent from './carousel.js';
-import { carouselContext } from './context.js';
 import { styles } from './themes/carousel-slide.base.css.js';
 
 /**

src/components/carousel/carousel-slide.ts

@@ -11,6 +11,7 @@ import { type Ref, createRef, ref } from 'lit/directives/ref.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { themes } from '../../theming/theming-decorator.js';
 import IgcButtonComponent from '../button/button.js';
+import { carouselContext } from '../common/context.js';
 import { addKeyboardFocusRing } from '../common/controllers/focus-ring.js';
 import {
   type SwipeEvent,
@@ -46,7 +47,6 @@ import IgcIconComponent from '../icon/icon.js';
 import IgcCarouselIndicatorContainerComponent from './carousel-indicator-container.js';
 import IgcCarouselIndicatorComponent from './carousel-indicator.js';
 import IgcCarouselSlideComponent from './carousel-slide.js';
-import { carouselContext } from './context.js';
 import { styles } from './themes/carousel.base.css.js';
 import { all } from './themes/container.js';
 import { styles as shared } from './themes/shared/carousel.common.css.js';

src/components/carousel/carousel.ts

@@ -0,0 +1,21 @@
+import { createContext } from '@lit/context';
+import type { Ref } from 'lit/directives/ref.js';
+import type IgcCarouselComponent from '../carousel/carousel.js';
+import type IgcTileManagerComponent from '../tile-manager/tile-manager.js';
+
+export type TileManagerContext = {
+  /** The igc-tile-manager instance. */
+  instance: IgcTileManagerComponent;
+  /** The internal CSS grid container of the igc-tile-manager. */
+  grid: Ref<HTMLElement>;
+};
+
+const carouselContext = createContext<IgcCarouselComponent>(
+  Symbol('carousel-context')
+);
+
+const tileManagerContext = createContext<TileManagerContext>(
+  Symbol('tile-manager-context')
+);
+
+export { carouselContext, tileManagerContext };

src/components/carousel/context.ts

@@ -0,0 +1,63 @@
+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;
+};
+
+/* blazorSuppress */
+export 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>) {
+    this._host = host;
+    this._options = options;
+
+    this._host.addController(this);
+  }
+
+  public get value(): ContextType<T> | undefined {
+    return this._consumer?.value;
+  }
+
+  public async hostConnected(): Promise<void> {
+    await this._host.updateComplete;
+
+    // If there is already an instance of a consumer (because of an attach/detach cycle),
+    // skip creating a new instance for this host.
+    if (!this._consumer) {
+      this._consumer = new ContextConsumer(this._host, {
+        context: this._options.context,
+        callback: this._options.callback,
+        subscribe: this._options.subscribe,
+      });
+    }
+  }
+}
+
+export 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> {
+  return new AsyncContextConsumer(host, {
+    context,
+    callback,
+    subscribe: true,
+  }) as AsyncContextConsumer<T, Host>;
+}