[WIP] Tile manager component implementation

package.json

@@ -79,7 +79,7 @@
     "globby": "^14.0.2",
     "husky": "^9.1.7",
     "ig-typedoc-theme": "^5.0.4",
-    "igniteui-theming": "^14.3.0",
+    "igniteui-theming": "^14.4.0-beta.1",
     "keep-a-changelog": "^2.5.3",
     "lint-staged": "^15.2.10",
     "lit-analyzer": "^2.0.3",

src/components/carousel/carousel-indicator.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-slide.ts

@@ -5,11 +5,11 @@ import { property } from 'lit/decorators.js';
 import { type Ref, createRef, ref } from 'lit/directives/ref.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, partNameMap } 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.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/common/context.ts

@@ -0,0 +1,29 @@
+import { createContext } from '@lit/context';
+import type IgcCarouselComponent from '../carousel/carousel.js';
+import type IgcTileManagerComponent from '../tile-manager/tile-manager.js';
+import type IgcTileComponent from '../tile-manager/tile.js';
+
+export type TileManagerContext = {
+  instance: IgcTileManagerComponent;
+  draggedItem: IgcTileComponent | null;
+};
+
+export type TileContext = {
+  instance: IgcTileComponent;
+  setFullscreenState: (
+    fullscreen: boolean,
+    isUserTriggered?: boolean
+  ) => unknown;
+};
+
+const carouselContext = createContext<IgcCarouselComponent>(
+  Symbol('carousel-context')
+);
+
+const tileContext = createContext<TileContext>(Symbol('tile-context'));
+
+const tileManagerContext = createContext<TileManagerContext>(
+  Symbol('tile-manager-context')
+);
+
+export { carouselContext, tileContext, tileManagerContext };

src/components/common/util.ts

@@ -288,3 +288,17 @@ export function asArray<T>(value?: T | T[]): T[] {
   if (!isDefined(value)) return [];
   return Array.isArray(value) ? value : [value];
 }
+
+export function partition<T>(
+  array: T[],
+  isTruthy: (value: T) => boolean
+): [truthy: T[], falsy: T[]] {
+  const truthy: T[] = [];
+  const falsy: T[] = [];
+
+  for (const item of array) {
+    (isTruthy(item) ? truthy : falsy).push(item);
+  }
+
+  return [truthy, falsy];
+}

src/components/common/utils.spec.ts

@@ -337,6 +337,41 @@ export function simulateWheel(node: Element, options?: WheelEventInit) {
   );
 }
 
+export function simulateDragStart(node: Element) {
+  node.dispatchEvent(
+    new DragEvent('dragstart', {
+      bubbles: true,
+      composed: true,
+      dataTransfer: new DataTransfer(),
+    })
+  );
+}
+
+export function simulateDragOver(node: Element) {
+  node.dispatchEvent(
+    new DragEvent('dragover', {
+      bubbles: true,
+      composed: true,
+    })
+  );
+}
+
+export function simulateDragEnd(node: Element) {
+  node.dispatchEvent(
+    new DragEvent('dragend', { bubbles: true, composed: true })
+  );
+}
+
+export function simulateDrop(node: Element) {
+  node.dispatchEvent(new DragEvent('drop', { bubbles: true, composed: true }));
+}
+
+export function simulateDoubleClick(node: Element) {
+  node.dispatchEvent(
+    new PointerEvent('dblclick', { bubbles: true, composed: true })
+  );
+}
+
 /**
  * Returns an array of all Animation objects affecting this element or which are scheduled to do so in the future.
  * It can optionally return Animation objects for descendant elements too.

src/components/icon/icon-references.ts

@@ -275,3 +275,49 @@ addIcon('error', {
     collection: 'internal',
   },
 });
+addIcon('fullscreen', {
+  default: {
+    name: 'fullscreen',
+    collection: 'internal',
+  },
+  indigo: {
+    name: 'indigo_fullscreen',
+    collection: 'internal',
+  },
+});
+addIcon('fullscreen_exit', {
+  default: {
+    name: 'fullscreen_exit',
+    collection: 'internal',
+  },
+  indigo: {
+    name: 'indigo_fullscreen_exit',
+    collection: 'internal',
+  },
+});
+addIcon('expand_content', {
+  default: {
+    name: 'expand_content',
+    collection: 'internal',
+  },
+  indigo: {
+    name: 'indigo_expand_content',
+    collection: 'internal',
+  },
+});
+addIcon('collapse_content', {
+  default: {
+    name: 'collapse_content',
+    collection: 'internal',
+  },
+  indigo: {
+    name: 'indigo_collapse_content',
+    collection: 'internal',
+  },
+});
+addIcon('resize', {
+  default: {
+    name: 'resize',
+    collection: 'internal',
+  },
+});

src/components/icon/internal-icons-lib.ts

@@ -62,6 +62,53 @@ export const internalIcons = new Map<string, SvgIcon>(
     calendar_today: {
       svg: `<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>`,
     },
+    expand_content: {
+      svg: `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M200-200v-240h80v160h160v80H200Zm480-320v-160H520v-80h240v240h-80Z"/></svg>`,
+    },
+    indigo_expand_content: {
+      svg: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 9C21 9.82843 20.3284 10.5 19.5 10.5C18.6716 10.5 18 9.82843 18 9V6H15C14.1716 6 13.5 5.32843 13.5 4.5C13.5 3.67157 14.1716 3 15 3L19.5 3C20.3284 3 21 3.67218 21 4.50061V9Z" fill="#6C707A"/>
+<path d="M3 15C3 14.1716 3.67157 13.5 4.5 13.5C5.32843 13.5 6 14.1716 6 15V18H9C9.82843 18 10.5 18.6716 10.5 19.5C10.5 20.3284 9.82843 21 9 21H4.5C3.67157 21 3 20.3278 3 19.4994V15Z" fill="#6C707A"/>
+</svg>
+`,
+    },
+    collapse_content: {
+      svg: `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M440-440v240h-80v-160H200v-80h240Zm160-320v160h160v80H520v-240h80Z"/></svg>`,
+    },
+    indigo_collapse_content: {
+      svg: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 3C14.1716 3 13.5 3.67157 13.5 4.5L13.5 8.9994C13.5 9.82782 14.1716 10.5 15 10.5L19.5 10.5C20.3284 10.5 21 9.82843 21 9C21 8.17158 20.3284 7.5 19.5 7.5L16.5 7.5L16.5 4.5C16.5 3.67157 15.8284 3 15 3Z" fill="#6C707A"/>
+<path d="M9 21C9.82842 21 10.5 20.3284 10.5 19.5V15.0006C10.5 14.1722 9.82843 13.5 9 13.5L4.5 13.5C3.67157 13.5 3 14.1716 3 15C3 15.8284 3.67157 16.5 4.5 16.5H7.5V19.5C7.5 20.3284 8.17157 21 9 21Z" fill="#6C707A"/>
+</svg>
+`,
+    },
+    fullscreen: {
+      svg: `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M120-120v-200h80v120h120v80H120Zm520 0v-80h120v-120h80v200H640ZM120-640v-200h200v80H200v120h-80Zm640 0v-120H640v-80h200v200h-80Z"/></svg>`,
+    },
+    indigo_fullscreen: {
+      svg: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.16606 3H8.66571C9.06363 3 9.44512 3.15818 9.72636 3.43942C10.0076 3.72069 10.1657 4.10213 10.1657 4.5C10.1657 4.89782 10.0077 5.2794 9.72636 5.56071C9.44502 5.84205 9.06349 6 8.66571 6H6.16657C6.12239 6.00015 6.08005 6.01779 6.04883 6.04907C6.01759 6.08036 6 6.12284 6 6.16717V8.66683C6 9.06465 5.84195 9.44623 5.56064 9.72754C5.27931 10.0089 4.89778 10.1668 4.5 10.1668C4.10222 10.1668 3.72069 10.0089 3.43936 9.72754C3.15805 9.44623 3 9.06465 3 8.66683V6.16718C3.00098 5.32785 3.33474 4.52264 3.92812 3.92903C4.5215 3.33542 5.32673 3.00131 6.16606 3Z" fill="#6C707A"/>
+<path d="M14.2715 3.43942C14.5527 3.15818 14.9342 3 15.3321 3H17.8328C18.6724 3.00098 19.4778 3.33492 20.0714 3.92857C20.6651 4.52223 20.999 5.32714 21 6.16667L21 8.66683C21 9.06465 20.842 9.44623 20.5606 9.72754C20.2793 10.0089 19.8978 10.1668 19.5 10.1668C19.1022 10.1668 18.7207 10.0089 18.4394 9.72754C18.158 9.44623 18 9.06465 18 8.66683L18 6.16794C17.9998 6.1236 17.9821 6.08077 17.9507 6.04934C17.9192 6.01785 17.8766 6.00015 17.8323 6H15.3321C14.9343 6 14.5528 5.84205 14.2715 5.56071C13.9902 5.2794 13.8321 4.89782 13.8321 4.5C13.8321 4.10213 13.9902 3.72069 14.2715 3.43942Z" fill="#6C707A"/>
+<path d="M3.43936 14.2736C3.72069 13.9923 4.10222 13.8344 4.5 13.8344C4.89778 13.8344 5.27931 13.9923 5.56064 14.2736C5.84195 14.5549 6 14.9365 6 15.3344V17.8335C6.00015 17.8776 6.01771 17.9198 6.04895 17.9511C6.08014 17.9822 6.12239 17.9998 6.16651 18H8.66571C9.06363 18 9.44512 18.1582 9.72636 18.4394C10.0076 18.7207 10.1657 19.1021 10.1657 19.5C10.1657 19.8978 10.0077 20.2794 9.72636 20.5607C9.44502 20.842 9.06349 21 8.66571 21H6.16606C5.32684 20.999 4.52172 20.6653 3.92825 20.0718C3.3348 19.4784 3.00098 18.6738 3 17.8345V15.3344C3 14.9365 3.15805 14.5549 3.43936 14.2736Z" fill="#6C707A"/>
+<path d="M20.071 20.0719C19.4774 20.6653 18.6726 20.999 17.8333 21L15.3321 21C14.9343 21 14.5528 20.842 14.2715 20.5607C13.9902 20.2794 13.8321 19.8978 13.8321 19.5C13.8321 19.1021 13.9902 18.7207 14.2715 18.4394C14.5527 18.1582 14.9342 18 15.3321 18H17.8328C17.8772 18 17.9196 17.9824 17.9509 17.9512C17.9822 17.9199 17.9998 17.8773 18 17.8332L18 15.3344C18 14.9365 18.158 14.5549 18.4394 14.2736C18.7207 13.9923 19.1022 13.8344 19.5 13.8344C19.8978 13.8344 20.2793 13.9923 20.5606 14.2736C20.842 14.5549 21 14.9365 21 15.3344L21 17.8347C20.9987 18.674 20.6646 19.4785 20.071 20.0719Z" fill="#6C707A"/>
+</svg>
+`,
+    },
+    fullscreen_exit: {
+      svg: `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M240-120v-120H120v-80h200v200h-80Zm400 0v-200h200v80H720v120h-80ZM120-640v-80h120v-120h80v200H120Zm520 0v-200h80v120h120v80H640Z"/></svg>`,
+    },
+    indigo_fullscreen_exit: {
+      svg: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.23813 9.23897C8.64442 9.83244 7.83947 10.1662 6.99999 10.1668H4.5C4.10222 10.1668 3.72069 10.0089 3.43936 9.72754C3.15805 9.44623 3 9.06465 3 8.66683C3 8.26901 3.15805 7.88742 3.43936 7.60612C3.72069 7.32478 4.10222 7.16683 4.5 7.16683H6.99965C7.04399 7.16683 7.08646 7.14924 7.11776 7.118C7.14907 7.08674 7.16668 7.04445 7.16683 7.00032V4.5C7.16683 4.10219 7.3248 3.72074 7.60612 3.43942C7.88738 3.15816 8.26894 3 8.66683 3C9.06474 3 9.44623 3.15818 9.72747 3.43942C10.0087 3.72069 10.1668 4.10212 10.1668 4.5V7.00133C10.1658 7.84082 9.83183 8.6455 9.23813 9.23897Z" fill="#6C707A"/>
+<path d="M14.2726 3.43942C14.5538 3.15818 14.9353 3 15.3332 3C15.7312 3 16.1126 3.15818 16.3939 3.43942C16.6752 3.72069 16.8332 4.10212 16.8332 4.5V6.99982C16.8335 7.04404 16.8513 7.08642 16.8826 7.11774C16.914 7.14902 16.9564 7.16668 17.0008 7.16683H19.5C19.8978 7.16683 20.2793 7.32478 20.5606 7.60612C20.842 7.88742 21 8.26901 21 8.66683C21 9.06465 20.842 9.44623 20.5606 9.72754C20.2793 10.0089 19.8978 10.1668 19.5 10.1668H17.0003C16.1609 10.1662 15.3556 9.83243 14.7619 9.23897C14.1682 8.6455 13.8342 7.84082 13.8332 7.00133V4.5C13.8332 4.10212 13.9913 3.72069 14.2726 3.43942Z" fill="#6C707A"/>
+<path d="M3.43936 14.2736C3.72069 13.9923 4.10222 13.8343 4.5 13.8343H6.99965C7.83913 13.835 8.64442 14.1687 9.23813 14.7622C9.83183 15.3557 10.1658 16.1604 10.1668 16.9998V19.5C10.1668 19.8978 10.0088 20.2794 9.72747 20.5607C9.44613 20.842 9.06461 21 8.66683 21C8.26907 21 7.88747 20.8421 7.60612 20.5607C7.32476 20.2794 7.16683 19.8978 7.16683 19.5V17.0009C7.16668 16.9567 7.14907 16.9144 7.11776 16.8832C7.08646 16.8519 7.04399 16.8343 6.99965 16.8343H4.5C4.10222 16.8343 3.72069 16.6764 3.43936 16.3951C3.15805 16.1138 3 15.7322 3 15.3343C3 14.9365 3.15805 14.5549 3.43936 14.2736Z" fill="#6C707A"/>
+<path d="M14.7619 14.7622C15.3556 14.1687 16.1605 13.835 17 13.8343H19.5C19.8978 13.8343 20.2793 13.9923 20.5606 14.2736C20.842 14.5549 21 14.9365 21 15.3343C21 15.7322 20.842 16.1138 20.5606 16.3951C20.2793 16.6764 19.8978 16.8343 19.5 16.8343L17.0011 16.8343C16.9567 16.8345 16.914 16.8522 16.8826 16.8834C16.8513 16.9148 16.8335 16.9571 16.8332 17.0014V19.5C16.8332 19.8978 16.6752 20.2794 16.3939 20.5607C16.1125 20.842 15.731 21 15.3332 21C14.9355 21 14.5539 20.842 14.2726 20.5607C13.9913 20.2794 13.8332 19.8978 13.8332 19.5V17.0003C13.8342 16.1609 14.1682 15.3557 14.7619 14.7622Z" fill="#6C707A"/>
+</svg>
+`,
+    },
+    resize: {
+      svg: `<svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.30362 0L0 8.30362L0.691969 8.99559L8.99559 0.691968L8.30362 0Z"/><path d="M8.30803 3.46558L3.46425 8.30936L4.15622 9.00132L9 4.15755L8.30803 3.46558Z"/></svg>`,
+    },
     indigo_clear: {
       svg: `<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 24 24">
 <path d="M14.8144 11.9896L18.4171 8.39087C18.7818 8.0135 18.9836 7.50809 18.9791 6.98347C18.9745 6.45885 18.764 5.95699 18.3927 5.58602C18.0215 5.21504 17.5192 5.00464 16.9942 5.00008C16.4692 4.99552 15.9635 5.19718 15.5858 5.56166L11.9896 9.15372L8.39335 5.56166C8.01571 5.19718 7.50992 4.99552 6.98492 5.00008C6.45992 5.00464 5.95769 5.21505 5.58645 5.58602C5.2152 5.95699 5.00464 6.45885 5.00008 6.98347C4.99551 7.50809 5.19733 8.0135 5.56207 8.39087L9.18561 12.0104L5.58291 15.6091C5.21817 15.9865 5.01635 16.4919 5.02091 17.0165C5.02548 17.5412 5.23604 18.043 5.60729 18.414C5.97853 18.785 6.48075 18.9954 7.00576 18.9999C7.53076 19.0045 8.03654 18.8028 8.41419 18.4383L12.0104 14.8463L15.6067 18.4383C15.9843 18.8028 16.4901 19.0045 17.0151 18.9999C17.5401 18.9954 18.0423 18.785 18.4136 18.414C18.7848 18.043 18.9954 17.5412 18.9999 17.0165C19.0045 16.4919 18.8027 15.9865 18.4379 15.6091L14.8144 11.9896Z"/>

src/components/tile-manager/controllers/fullscreen.ts

@@ -0,0 +1,61 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+
+type FullscreenControllerCallback = (state: boolean) => boolean;
+
+class FullscreenController implements ReactiveController {
+  private _host: ReactiveControllerHost & HTMLElement;
+  private _callback?: FullscreenControllerCallback;
+
+  private _fullscreen = false;
+
+  public get fullscreen(): boolean {
+    return this._fullscreen;
+  }
+
+  constructor(
+    host: ReactiveControllerHost & HTMLElement,
+    callback?: FullscreenControllerCallback
+  ) {
+    this._host = host;
+    this._callback = callback;
+    host.addController(this);
+  }
+
+  public setState(fullscreen: boolean, isUserTriggered = false): void {
+    if (isUserTriggered && this._callback) {
+      if (!this._callback.call(this._host, fullscreen)) {
+        return;
+      }
+    }
+
+    this._fullscreen = fullscreen;
+
+    if (this._fullscreen) {
+      this._host.requestFullscreen();
+    } else if (document.fullscreenElement) {
+      document.exitFullscreen();
+    }
+  }
+
+  public handleEvent() {
+    const isFullscreen = document.fullscreenElement === this._host;
+    if (!isFullscreen && this._fullscreen) {
+      this.setState(false, true);
+    }
+  }
+
+  public hostConnected(): void {
+    this._host.addEventListener('fullscreenchange', this);
+  }
+
+  public hostDisconnected(): void {
+    this._host.removeEventListener('fullscreenchange', this);
+  }
+}
+
+export function addFullscreenController(
+  host: ReactiveControllerHost & HTMLElement,
+  callback?: FullscreenControllerCallback
+) {
+  return new FullscreenController(host, callback);
+}