Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] Tile manager component implementation #1402

Draft
wants to merge 191 commits into
base: master
Choose a base branch
from
Draft
Changes from all commits
Commits
Show all changes
191 commits
Select commit Hold shift + click to select a range
a753348
Initial tile manager draft
mtsvyatkova Sep 25, 2024
ff51d7c
feat(tile-manager): implement base resizing logic
onlyexeption Oct 3, 2024
1e990ab
Merge branch 'master' into mtsvyatkova/feat-1379-tile-manager
onlyexeption Oct 4, 2024
d76d33d
feat(tiles): add drag and drop of tiles
mtsvyatkova Oct 4, 2024
d985fb0
Merge branch 'mtsvyatkova/feat-1379-tile-manager' of https://github.c…
mtsvyatkova Oct 4, 2024
c3fb21e
Merge branch 'mtsvyatkova/feat-1379-tile-manager' into ibarakov/tile-…
onlyexeption Oct 4, 2024
1582eee
Merge pull request #1420 from IgniteUI/ibarakov/tile-manager-resizing
onlyexeption Oct 4, 2024
6a113b1
feat(tiles): add drag mode property
mtsvyatkova Oct 4, 2024
ab6a8d9
feat(tile-manager): add header & content parts + fix styling
onlyexeption Oct 8, 2024
97fcaf7
Merge branch 'mtsvyatkova/feat-1379-tile-manager' of https://github.c…
onlyexeption Oct 8, 2024
c2a3fe1
Merge branch 'master' into mtsvyatkova/feat-1379-tile-manager
gedinakova Oct 8, 2024
ee2f0ba
chore(*): add base to style file names
mtsvyatkova Oct 8, 2024
1fb5d09
Merge branch 'mtsvyatkova/feat-1379-tile-manager' of https://github.c…
mtsvyatkova Oct 8, 2024
ec95ef9
feat(tile-manager): add maximized property for tiles
mtsvyatkova Oct 9, 2024
cb9b7fd
chore: update shorthand css prop
mtsvyatkova Oct 9, 2024
5e030d7
fix(tile-manager): always set droptarget to igc-tile
onlyexeption Oct 10, 2024
2279486
chore: minor fix
onlyexeption Oct 10, 2024
f4d9672
feat(tile-manager): add manual slot assignment
mtsvyatkova Oct 11, 2024
28a83cb
chore: remove the name for tile content slot and igctilecomponent
mtsvyatkova Oct 11, 2024
dd707a1
feat(tile-manager): add column and row count and colSpan in tile comp…
onlyexeption Oct 11, 2024
8cf1f80
feat(tile-manager): Added fullscreen behavior for tiles (#1434)
rkaraivanov Oct 11, 2024
e361531
chore: add initialization and manual slot assignment test
mtsvyatkova Oct 15, 2024
56c3471
feat(tile-manager):| add tile col/row Start properties
onlyexeption Oct 15, 2024
ecbf2d5
Merge remote-tracking branch 'origin/master' into mtsvyatkova/feat-13…
rkaraivanov Oct 16, 2024
b277093
chore: Adjusted tile manager story sample
rkaraivanov Oct 16, 2024
c7f897e
feat: Add tile DnD events controller
rkaraivanov Oct 16, 2024
91d8f75
refactor: Initial events for tile manager
rkaraivanov Oct 16, 2024
4b72b6b
feat(tile): Maximized state uses Popover API
rkaraivanov Oct 17, 2024
3d4dd15
tests: add some drag and drop tests
mtsvyatkova Oct 17, 2024
0f8c999
feat(tile-manager): tiles collection manipulation support
mtsvyatkova Oct 21, 2024
cf317c1
refactor: use MutationController
mtsvyatkova Oct 21, 2024
34e3c57
feat(tile-manager): implement deffered resizing
onlyexeption Oct 22, 2024
2fa05ac
chore: cast event listeners
onlyexeption Oct 23, 2024
1d69ae9
feat(tile-manager): cancel resize on pressing escape
onlyexeption Oct 23, 2024
666d9d7
chore: add cancel resize test
onlyexeption Oct 24, 2024
6a30f22
chore: remove right and bottom resizer from test
mtsvyatkova Oct 24, 2024
f80db8e
Merge branch 'master' into mtsvyatkova/feat-1379-tile-manager
rkaraivanov Oct 25, 2024
8c22833
test: fix some tests
mtsvyatkova Oct 25, 2024
74a0da1
feat(tile-manager): add serialization logic
mtsvyatkova Oct 28, 2024
57dd0b8
feat(tile-manager): state change events
onlyexeption Oct 28, 2024
0e00368
Merge branch 'mtsvyatkova/feat-1379-tile-manager' of https://github.c…
onlyexeption Oct 28, 2024
66ad382
chore: Events and removed single out unit test
rkaraivanov Oct 29, 2024
00de7b2
Merge remote-tracking branch 'origin/master' into mtsvyatkova/feat-13…
rkaraivanov Oct 29, 2024
8853d53
fix(tile-manager): fix resize controller, events, tests
onlyexeption Oct 29, 2024
d2a699c
refactor: Dropped logic for grid row/column assignment
rkaraivanov Oct 30, 2024
ddf74f4
fix(tile-manager):emit maximized event on user interaction only
onlyexeption Oct 30, 2024
bed724a
feat(tile-manager): add disableDrag and disableResize properties
mtsvyatkova Oct 30, 2024
83651e6
chore(*): add comment
onlyexeption Oct 31, 2024
dd67bd8
refactor: Move to implicit CSS grid
rkaraivanov Nov 4, 2024
8ec0b94
feat(tile-manager): expose position prop for tiles and update the dro…
mtsvyatkova Nov 6, 2024
1e1b5da
refactor: remove unnecessary DOM elements and set exact offset for th…
mtsvyatkova Nov 7, 2024
b1ee224
fix(tile-manager): apply saved props to tiles already in DOM
mtsvyatkova Nov 8, 2024
08c84ec
fix(tile-manager): remove rowCount prop
onlyexeption Nov 11, 2024
c7a691e
refactor: modify position assignment to keep originally assigned posi…
mtsvyatkova Nov 11, 2024
642809f
fix(tile-manager): add a check for removed and added tiles
mtsvyatkova Nov 12, 2024
bf1abb5
feat(tile-manager): initial styling
SisIvanova Nov 12, 2024
be99a54
feat: add tile parts on resizing/dragging
onlyexeption Nov 12, 2024
3d258e4
feat(tile-manager): add props to disable resize and DnD (#1468)
onlyexeption Nov 12, 2024
88cf14b
fix(tile-manager): dragging styles
SisIvanova Nov 12, 2024
e74dcf2
Merge branch 'master' into mtsvyatkova/feat-1379-tile-manager
SisIvanova Nov 12, 2024
5029d9e
test(tile-manager): update tests
mtsvyatkova Nov 13, 2024
5d487f5
chore: dashboard stories initial commit
onlyexeption Nov 15, 2024
76f451b
feat(tile-manager): styling improvements
SisIvanova Nov 15, 2024
8dc98cd
feat(tile-manager): Add tile context to header
mtsvyatkova Nov 18, 2024
5f3ce02
feat: Abstract resizing logic
rkaraivanov Nov 19, 2024
fda7628
feat(tile-manager): add fullscreen prop
mtsvyatkova Nov 20, 2024
f2c28cc
refactor: split tests in multiple files
mtsvyatkova Nov 20, 2024
b9ff8ab
fix: connect css vars to props, fix maximized prop and remove watcher
onlyexeption Nov 20, 2024
52c42db
fix: use col/row start and span props in tile to set grid-col and row
onlyexeption Nov 20, 2024
9d8ca4a
fix: set component props in stories + add setter to columnCount
onlyexeption Nov 21, 2024
3b26b9e
fix: tile css parts
onlyexeption Nov 21, 2024
9e5cafb
refactor(tile-manager): add base dark schema
SisIvanova Nov 22, 2024
c0d1345
Merge branch 'master' into mtsvyatkova/feat-1379-tile-manager
SisIvanova Nov 22, 2024
a7d0497
chore(*): restore setDragImage offset
mtsvyatkova Nov 22, 2024
3f434f1
refactor(tile-manager): styling improvements
SisIvanova Nov 25, 2024
b7a524b
fix(tile-manager): resize element position
SisIvanova Nov 25, 2024
903b414
chore: sample changes + add resizing/resizable parts
onlyexeption Nov 25, 2024
3b04b5b
Merge branch 'mtsvyatkova/feat-1379-tile-manager' of https://github.c…
onlyexeption Nov 25, 2024
ec0a69e
feat(tile-manager): resize icon and styles
SisIvanova Nov 26, 2024
ba59817
fix: handle columnCount undefined value in setter
onlyexeption Nov 26, 2024
1f6067d
Merge branch 'mtsvyatkova/feat-1379-tile-manager' of https://github.c…
onlyexeption Nov 26, 2024
b3ff5f7
fix: correctly resize ghost element on resize
onlyexeption Nov 26, 2024
af8b1fc
fix: resize ghost refinement + remove tile related stuff from resize …
onlyexeption Nov 27, 2024
1d8d987
refactor(tile-manager): header / resize-indicator / stories
SisIvanova Nov 27, 2024
1dec463
fix(tile-manager): properly update positions on tile addition or removal
mtsvyatkova Nov 28, 2024
71889e4
test: fix default component state test
mtsvyatkova Nov 28, 2024
f18d17b
feat: resize snapping initial implementatiton
onlyexeption Nov 29, 2024
059e421
refactor(tile-manager): update row height & column width
SisIvanova Dec 2, 2024
44bcbec
feat: initial drag ghost functionality
mtsvyatkova Dec 2, 2024
5616dbb
Merge branch 'mtsvyatkova/feat-1379-tile-manager' of https://github.c…
mtsvyatkova Dec 2, 2024
ea8a8af
Merge remote-tracking branch 'origin/master' into mtsvyatkova/feat-13…
rkaraivanov Dec 2, 2024
3c23f11
build(deps): Updated to latest theming package
rkaraivanov Dec 2, 2024
2f09944
refactor: Removed hardcoded CSS variables and default column count
rkaraivanov Dec 3, 2024
7d0d8c0
fix: improve resizing
onlyexeption Dec 3, 2024
2101223
feat(tile-manager): indigo related styles
SisIvanova Dec 3, 2024
d87a75f
refactor: Tile & Tile header
rkaraivanov Dec 4, 2024
3d230dc
Merge remote-tracking branch 'origin/master' into mtsvyatkova/feat-13…
rkaraivanov Dec 4, 2024
437ba64
fix: update fullscreen on esc key
mtsvyatkova Dec 5, 2024
cf9d4e7
refactor: Provide tile manager through context
rkaraivanov Dec 5, 2024
535e4bf
Merge remote-tracking branch 'origin/mtsvyatkova/feat-1379-tile-manag…
rkaraivanov Dec 5, 2024
cc5a3c2
fix: hide base and resize trigger while dragging
mtsvyatkova Dec 5, 2024
193fd24
feat(tile-manager): add dragging and resizing parts to the tile
mtsvyatkova Dec 6, 2024
b23eff3
feat(tile-manager): indigo icons & styling improvements
SisIvanova Dec 6, 2024
5deaac7
test(*): Fixed initialization test failures.
gedinakova Dec 9, 2024
3d6e17e
Merge branch 'mtsvyatkova/feat-1379-tile-manager' of https://github.c…
gedinakova Dec 9, 2024
ced3c5c
fix(*): Use shorthand 'overflow' to make lint happy.
gedinakova Dec 9, 2024
62f7f8a
refactor: Tiles position logic and slot assignment
rkaraivanov Dec 9, 2024
956e2c7
Merge branch 'mtsvyatkova/feat-1379-tile-manager' of https://github.c…
rkaraivanov Dec 9, 2024
0c46112
fix(*): Updated tile shadow dom in tile content test.
gedinakova Dec 9, 2024
62b33cd
fix: Fixed circular dependency
rkaraivanov Dec 9, 2024
2a18813
Merge remote-tracking branch 'origin/master' into mtsvyatkova/feat-13…
rkaraivanov Dec 9, 2024
d0cc154
fix(*): Fixed and enriched tile state tests.
gedinakova Dec 9, 2024
1db557f
remove: First iteration of a resize controller
rkaraivanov Dec 10, 2024
80665be
refactor: Fullscreen logic into a controller
rkaraivanov Dec 10, 2024
a253859
fix: add maximized-tile part on tile manager
mtsvyatkova Dec 11, 2024
7e53a56
refactor: improve the maximized-tile logic
mtsvyatkova Dec 11, 2024
495179a
fix(tile-manager): styling issues with maximized state
SisIvanova Dec 12, 2024
5980adc
Merge branch 'master' into mtsvyatkova/feat-1379-tile-manager
SisIvanova Dec 12, 2024
854c7a6
Update tile.base.scss
SisIvanova Dec 12, 2024
819b345
fix(*): Updated basic tests.
gedinakova Dec 12, 2024
89e4565
refactor: add drag ghost element only when dragging
mtsvyatkova Dec 12, 2024
f54e347
Merge remote-tracking branch 'origin/master' into mtsvyatkova/feat-13…
rkaraivanov Dec 12, 2024
014dfd3
Latest resizing changes (#1517)
gedinakova Dec 12, 2024
7f1a517
fix(*): remove dragImage async and fix test
mtsvyatkova Dec 12, 2024
8657c46
fix(*): set draggable on inner div
mtsvyatkova Dec 17, 2024
207eba8
Revert "fix(*): set draggable on inner div"
mtsvyatkova Dec 20, 2024
1fe82d2
fix(*): drag over part is set properly
mtsvyatkova Dec 20, 2024
966ea09
Merge branch 'master' into mtsvyatkova/feat-1379-tile-manager
gedinakova Jan 2, 2025
3c8cc97
fix(tm): fix resize end + move snapped width calc to util
onlyexeption Jan 3, 2025
b98cbdc
fix(tm): swap positions only once on drag over
mtsvyatkova Jan 6, 2025
9ec067d
chore: tile resize spec checkpoint
onlyexeption Jan 7, 2025
29b08a4
Merge branch 'master' of https://github.com/IgniteUI/igniteui-webcomp…
rkaraivanov Jan 8, 2025
a4ea0e6
fix(tm): ensure fullscreen and maximized events are emitted with the …
mtsvyatkova Jan 8, 2025
0adaea8
deps(theming): bump to latest beta
simeonoff Jan 8, 2025
bd35042
test: Refactored resize controller and adjusted resize tests
rkaraivanov Jan 8, 2025
cbf9d77
fix(tm): check if host is connected before requesting fullscreen
mtsvyatkova Jan 9, 2025
b92c97a
fix(tile-manager): tile styles when dragging
SisIvanova Jan 9, 2025
9952baa
Merge branch 'master' into mtsvyatkova/feat-1379-tile-manager
SisIvanova Jan 9, 2025
3353f33
fix(tile-manager): hide maximize button in fullscreen
SisIvanova Jan 10, 2025
19d6dfe
fix: set resizable element in controller config + update tests
onlyexeption Jan 10, 2025
5928417
chore: add test that checks resizing part
onlyexeption Jan 13, 2025
d6d24eb
feat: create css var for grid gap
onlyexeption Jan 13, 2025
b719016
fix(tm): add slots for default actions in tile header
mtsvyatkova Jan 13, 2025
7c0e263
refactor(tile-manager): hide resize with visibility hidden
SisIvanova Jan 13, 2025
a16e750
fix: cache and use gap prop in calculations
onlyexeption Jan 13, 2025
2b1d533
Merge branch 'master' into mtsvyatkova/feat-1379-tile-manager
rkaraivanov Jan 14, 2025
7918621
chore: use underscore for all action slots
mtsvyatkova Jan 14, 2025
18866ef
fix(tm): update maximize button when the property is set
mtsvyatkova Jan 14, 2025
ab40a9a
fix(tm): update draggable attr on hostUpdate
mtsvyatkova Jan 15, 2025
043c97d
fix: apply ghost size on resize end
onlyexeption Jan 15, 2025
f36ab80
Merge branch 'mtsvyatkova/feat-1379-tile-manager' of https://github.c…
onlyexeption Jan 15, 2025
c3e5783
Merge branch 'master' into mtsvyatkova/feat-1379-tile-manager
rkaraivanov Jan 16, 2025
d748e2a
fix: resizing a tile more than the viewport receives max column spans
onlyexeption Jan 20, 2025
596b425
fix(tm): set proper position if tiles are added on demand
mtsvyatkova Jan 20, 2025
a9b6853
Merge branch 'master' into mtsvyatkova/feat-1379-tile-manager
rkaraivanov Jan 21, 2025
187657d
Merge branch 'master' into mtsvyatkova/feat-1379-tile-manager
rkaraivanov Jan 22, 2025
5f64a73
refactor(tile): Dropped fullscreen setter
rkaraivanov Jan 24, 2025
a9dd4d8
Merge branch 'master' into mtsvyatkova/feat-1379-tile-manager
rkaraivanov Jan 24, 2025
63548e6
Merge branch 'master' into mtsvyatkova/feat-1379-tile-manager
gedinakova Jan 28, 2025
87e0fa1
fix: Context request event timing between slotted consumers/providers
rkaraivanov Jan 29, 2025
43f23aa
Merge branch 'master' into mtsvyatkova/feat-1379-tile-manager
rkaraivanov Jan 30, 2025
d299d41
Merge branch 'master' into mtsvyatkova/feat-1379-tile-manager
rkaraivanov Feb 3, 2025
6e309c1
feat(resize): Resize container element & controller (#1541)
rkaraivanov Feb 5, 2025
24d6348
Refactor tile manager's drag and drop to use pointer events (#1557)
mtsvyatkova Feb 6, 2025
1bce769
fix(lint): Linter errors and warnings
rkaraivanov Feb 6, 2025
0481447
refactor: Define custom types for tile manager properties
rkaraivanov Feb 6, 2025
42b7bf5
fix: await next frame in tests and fix tile part test
onlyexeption Feb 6, 2025
5fec8ea
refactor(tests): use pointer events in dnd tests
mtsvyatkova Feb 6, 2025
457e92a
test: Fixed tile DOM structure comparison
rkaraivanov Feb 6, 2025
020ea03
Merge branch 'mtsvyatkova/feat-1379-tile-manager' of https://github.c…
rkaraivanov Feb 6, 2025
b5da258
Merge branch 'master' into mtsvyatkova/feat-1379-tile-manager
rkaraivanov Feb 6, 2025
6b1a2fe
refactor: Controllers tests and code clean-up
rkaraivanov Feb 7, 2025
479b444
fix: prevent flickering by returning to valid snapped width/height
onlyexeption Feb 10, 2025
1c1fe81
Merge branch 'mtsvyatkova/feat-1379-tile-manager' of https://github.c…
rkaraivanov Feb 10, 2025
5413ab6
refactor: Drag and resizing
rkaraivanov Feb 10, 2025
ec380c9
refactor(tile): define header on tile level (#1567)
mtsvyatkova Feb 11, 2025
d035d4e
refactor(tile): Dragging from head bound to title part
rkaraivanov Feb 11, 2025
8c15847
Merge branch 'master' into mtsvyatkova/feat-1379-tile-manager
rkaraivanov Feb 11, 2025
cb8b629
test(tile): add tests for the slotted items in the header
mtsvyatkova Feb 11, 2025
e35374e
feat: Added drag contorller internal state
rkaraivanov Feb 11, 2025
c07dcda
fix: calculate horizontal&vertical offset during updateState
onlyexeption Feb 11, 2025
914e715
Merge branch 'mtsvyatkova/feat-1379-tile-manager' of https://github.c…
onlyexeption Feb 11, 2025
2404e39
Merge branch 'master' into mtsvyatkova/feat-1379-tile-manager
rkaraivanov Feb 11, 2025
0e2be36
Merge branch 'master' into mtsvyatkova/feat-1379-tile-manager
rkaraivanov Feb 11, 2025
6e27950
refactor(tile-manager): tile header styles
SisIvanova Feb 11, 2025
3150949
fix(tile-manager): failing test
SisIvanova Feb 11, 2025
3377715
fix: Make the tile header part a section element
rkaraivanov Feb 12, 2025
f386bef
refactor: Removed manager drag overlay container
rkaraivanov Feb 13, 2025
aedc728
chore(*): Update FinDashboard stories (#1574)
gedinakova Feb 13, 2025
bcf6365
Merge branch 'master' into mtsvyatkova/feat-1379-tile-manager
rkaraivanov Feb 13, 2025
a130854
Merge branch 'master' into mtsvyatkova/feat-1379-tile-manager
rkaraivanov Feb 13, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -79,7 +79,7 @@
"globby": "^14.1.0",
"husky": "^9.1.7",
"ig-typedoc-theme": "^6.0.0",
"igniteui-theming": "^14.3.1",
"igniteui-theming": "^14.4.0-beta.2",
"keep-a-changelog": "^2.5.3",
"lint-staged": "^15.4.3",
"lit-analyzer": "^2.0.3",
15 changes: 15 additions & 0 deletions src/animations/player.ts
Original file line number Diff line number Diff line change
@@ -85,3 +85,18 @@ export function addAnimationController(
) {
return new AnimationController(host, target);
}

type ViewTransitionResult = {
transition?: ViewTransition;
};

export function startViewTransition(
callback?: ViewTransitionUpdateCallback
): ViewTransitionResult {
if (getPrefersReducedMotion() || !document.startViewTransition) {
callback?.();
return {};
}

return { transition: document.startViewTransition(callback) };
}
2 changes: 1 addition & 1 deletion src/components/carousel/carousel-indicator.ts
Original file line number Diff line number Diff line change
@@ -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';

/**
2 changes: 1 addition & 1 deletion src/components/carousel/carousel-slide.ts
Original file line number Diff line number Diff line change
@@ -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';

/**
2 changes: 1 addition & 1 deletion src/components/carousel/carousel.ts
Original file line number Diff line number Diff line change
@@ -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';
6 changes: 0 additions & 6 deletions src/components/carousel/context.ts

This file was deleted.

21 changes: 21 additions & 0 deletions src/components/common/context.ts
Original file line number Diff line number Diff line change
@@ -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 };
63 changes: 63 additions & 0 deletions src/components/common/controllers/async-consumer.ts
Original file line number Diff line number Diff line change
@@ -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>;
}
136 changes: 136 additions & 0 deletions src/components/common/controllers/drag.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
import {
defineCE,
elementUpdated,
expect,
fixture,
html,
unsafeStatic,
} from '@open-wc/testing';
import { LitElement, css } from 'lit';
import { spy } from 'sinon';
import {
compareStyles,
simulateKeyboard,
simulateLostPointerCapture,
simulatePointerDown,
} from '../utils.spec.js';
import { addDragController } from './drag.js';
import { escapeKey } from './key-bindings.js';

describe('Drag and drop controller', () => {
type DragElement = LitElement & {
controller: ReturnType<typeof addDragController>;
};

let tag: string;
let instance: DragElement;

before(() => {
tag = defineCE(
class extends LitElement {
public static override styles = css`
:host {
display: block;
width: 200px;
height: 200px;
}
`;

public controller = addDragController(this);

protected override render() {
return html`<slot></slot>`;
}
}
);
});

describe('Immediate mode - basic element dragging', () => {
const dragStart = spy();

beforeEach(async () => {
const tagName = unsafeStatic(tag);

const template = html`
<section style="width: 1000px; height: 1000px">
<${tagName}></${tagName}>
</section>
`;

const root = await fixture(template);

instance = root.querySelector(tagName._$litStatic$)!;
instance.controller.setConfig({ mode: 'immediate' });
});

afterEach(() => {
dragStart.resetHistory();
});

it('should not start drag operation when disabled', async () => {
instance.controller.setConfig({ enabled: false, dragStart });

simulatePointerDown(instance);
await elementUpdated(instance);

expect(dragStart.called).is.false;
});

it('should not start a drag operation on a non-primary button interaction', async () => {
instance.controller.setConfig({ dragStart });

simulatePointerDown(instance, { button: 1 });
await elementUpdated(instance);

expect(dragStart.called).is.false;
});

it('should invoke dragStart callback on drag operation', async () => {
instance.controller.setConfig({ dragStart });

simulatePointerDown(instance);
await elementUpdated(instance);

expect(dragStart.called).is.true;
});

it('should apply correct internal styles on drag operation', async () => {
instance.controller.setConfig({ dragStart });
const styles = { touchAction: 'none', userSelect: 'none' };

simulatePointerDown(instance);
await elementUpdated(instance);

// Default internal styles are touch-action: none & user-select: none while in drag mode.
expect(instance.attributeStyleMap.size).to.equal(2);
expect(compareStyles(instance, styles)).is.true;

simulateLostPointerCapture(instance);
await elementUpdated(instance);

expect(instance.attributeStyleMap.size).to.equal(0);
});

it('should not create ghost element in immediate mode', async () => {
instance.controller.setConfig({ dragStart });

simulatePointerDown(instance);
await elementUpdated(instance);
});

it('should fire dragCancel when pressing Escape during a drag operation', async () => {
const dragCancel = spy();
instance.controller.setConfig({ dragStart, dragCancel });

simulatePointerDown(instance);
await elementUpdated(instance);

expect(dragStart.called).is.true;

simulateKeyboard(instance, escapeKey);
await elementUpdated(instance);

expect(dragCancel.called).is.true;
});
});
});
Loading