Skip to content

Commit 8ceafe9

Browse files
simeonoffsimeonoff
authored
Merge branch 'master' into mpopov/refactoring/card/issue-15432
2 parents bf4d4b4 + a572d68 commit 8ceafe9

File tree

16 files changed

+315
-359
lines changed

16 files changed

+315
-359
lines changed

‎README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ See the [Storybook Here](https://igniteui.github.io/igniteui-webcomponents)
2323

2424
| Components | Status | Documentation | Released Version |
2525
| :---------------------- | :----: | :----------------------------: | :--------------: |
26+
| Tile Manager | ✅ | [Docs][Tile Manager Docs] | [5.3.0] |
2627
| Carousel | ✅ | [Docs][Carousel Docs] | [5.1.0] |
2728
| Date picker | ✅ | [Docs][Date Picker Docs] | [4.10.0] |
2829
| Divider | ✅ | [Docs][Divider Docs] | [4.10.0] |
@@ -237,6 +238,7 @@ npm run storybook:build
237238
[Divider Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/divider
238239
[Date Picker Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/scheduling/date-picker
239240
[Carousel Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/carousel
241+
[Tile Manager Docs]: https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/layouts/tile-manager
240242
[1.0.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/1.0.0
241243
[2.0.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/2.0.0
242244
[2.1.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/2.1.0
@@ -248,3 +250,4 @@ npm run storybook:build
248250
[4.5.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/4.5.0
249251
[4.10.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/4.10.0
250252
[5.1.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/5.1.0
253+
[5.3.0]: https://github.com/IgniteUI/igniteui-webcomponents/releases/tag/5.3.0

‎package-lock.json‎

Lines changed: 148 additions & 187 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -60,12 +60,12 @@
6060
"@custom-elements-manifest/analyzer": "^0.10.4",
6161
"@igniteui/material-icons-extended": "^3.1.0",
6262
"@open-wc/testing": "^4.0.0",
63-
"@storybook/addon-a11y": "^8.6.7",
64-
"@storybook/addon-actions": "^8.6.7",
65-
"@storybook/addon-essentials": "^8.6.7",
66-
"@storybook/addon-links": "^8.6.7",
67-
"@storybook/web-components": "^8.6.7",
68-
"@storybook/web-components-vite": "^8.6.7",
63+
"@storybook/addon-a11y": "^8.6.9",
64+
"@storybook/addon-actions": "^8.6.9",
65+
"@storybook/addon-essentials": "^8.6.9",
66+
"@storybook/addon-links": "^8.6.9",
67+
"@storybook/web-components": "^8.6.9",
68+
"@storybook/web-components-vite": "^8.6.9",
6969
"@types/mocha": "^10.0.10",
7070
"@web/dev-server-esbuild": "^1.0.4",
7171
"@web/test-runner": "^0.20.0",
@@ -80,7 +80,7 @@
8080
"husky": "^9.1.7",
8181
"ig-typedoc-theme": "^6.0.0",
8282
"igniteui-theming": "^16.1.0",
83-
"keep-a-changelog": "^2.6.1",
83+
"keep-a-changelog": "^2.6.2",
8484
"lint-staged": "^15.5.0",
8585
"lit-analyzer": "^2.0.3",
8686
"madge": "^8.0.0",
@@ -90,8 +90,8 @@
9090
"prettier": "^3.5.3",
9191
"rimraf": "^6.0.1",
9292
"sass-embedded": "~1.78.0",
93-
"sinon": "^19.0.2",
94-
"storybook": "^8.6.7",
93+
"sinon": "^20.0.0",
94+
"storybook": "^8.6.9",
9595
"stylelint": "^16.16.0",
9696
"stylelint-config-standard-scss": "^14.0.0",
9797
"stylelint-prettier": "^5.0.3",
@@ -101,7 +101,7 @@
101101
"typedoc": "~0.27.9",
102102
"typedoc-plugin-localization": "^3.0.6",
103103
"typescript": "^5.8.2",
104-
"vite": "^6.2.2"
104+
"vite": "^6.2.3"
105105
},
106106
"browserslist": [
107107
"defaults"

‎src/components/checkbox/themes/shared/switch/switch.bootstrap.scss‎

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -85,24 +85,6 @@ $theme: $bootstrap;
8585
}
8686
}
8787

88-
:host(:not([disabled])[invalid]),
89-
:host(:not(:disabled)[invalid]) {
90-
[part~='control'],
91-
[part~='control'][part~='checked'] {
92-
border-color: var-get($theme, 'error-color');
93-
}
94-
95-
[part~='control'][part~='checked'],
96-
[part~='thumb']:not([part~='checked']) {
97-
background: var-get($theme, 'error-color');
98-
}
99-
100-
[part='focused'][part~='control'],
101-
[part='focused'][part~='control'][part~='checked'] {
102-
box-shadow: 0 0 0 rem(2px) var-get($theme, 'error-color-hover');
103-
}
104-
}
105-
10688
:host([disabled]) {
10789
[part~='control'][part~='checked'] {
10890
border-color: var-get($theme, 'track-on-disabled-color');

‎src/components/checkbox/themes/shared/switch/switch.common.scss‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -39,12 +39,3 @@ $theme: $material;
3939
background: var-get($theme, 'thumb-disabled-color');
4040
}
4141
}
42-
43-
:host(:not([disabled])[invalid]),
44-
:host(:not(:disabled)[invalid]) {
45-
color: var-get($theme, 'label-invalid-color');
46-
47-
[part~='label'] {
48-
color: var-get($theme, 'label-invalid-color');
49-
}
50-
}

‎src/components/checkbox/themes/shared/switch/switch.fluent.scss‎

Lines changed: 0 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -78,28 +78,3 @@ $theme: $fluent;
7878
background: var-get($theme, 'thumb-on-color');
7979
}
8080
}
81-
82-
:host(:not([disabled])[invalid]),
83-
:host(:not(:disabled)[invalid]) {
84-
[part~='control'][part~='checked'] {
85-
background: var-get($theme, 'track-error-color');
86-
}
87-
88-
[part~='control'],
89-
[part~='control'][part~='checked'] {
90-
border-color: var-get($theme, 'error-color');
91-
}
92-
93-
[part~='thumb'] {
94-
background: var-get($theme, 'error-color');
95-
}
96-
97-
[part~='control'][part~='focused'],
98-
[part~='control'][part~='checked'][part~='focused'] {
99-
box-shadow: 0 0 0 rem(2px) var-get($theme, 'error-color-hover');
100-
}
101-
102-
[part~='thumb'][part~='checked'] {
103-
background: var-get($theme, 'thumb-on-error-color');
104-
}
105-
}

‎src/components/checkbox/themes/shared/switch/switch.indigo.scss‎

Lines changed: 0 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -72,33 +72,6 @@ $border-width: rem(1px);
7272
margin-inline-start: calc(100% - var(--thumb-size) - var(--thumb-offset));
7373
}
7474

75-
:host(:not([disabled])[invalid]),
76-
:host(:not(:disabled)[invalid]) {
77-
[part~='control'] {
78-
background: var-get($theme, 'track-error-color');
79-
}
80-
81-
[part~='control'],
82-
[part~='control'][part~='checked'] {
83-
border-color: var-get($theme, 'error-color');
84-
}
85-
86-
[part~='control'][part~='checked'],
87-
[part~='thumb'] {
88-
background: var-get($theme, 'error-color');
89-
}
90-
91-
[part~='control'][part~='focused'],
92-
[part~='control'][part~='checked'][part~='focused'] {
93-
box-shadow: 0 0 0 rem(2px) var-get($theme, 'error-color-hover');
94-
}
95-
96-
97-
[part~='thumb'][part~='checked'] {
98-
background: var-get($theme, 'thumb-on-error-color');
99-
}
100-
}
101-
10275
:host([disabled]),
10376
:host(:disabled) {
10477
[part~='control'][part~='checked'] {

‎src/components/checkbox/themes/shared/switch/switch.material.scss‎

Lines changed: 0 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -103,39 +103,3 @@ $ripple-radius: calc(#{$ripple-size} / 2);
103103
animation-duration: .2s;
104104
animation-fill-mode: forwards;
105105
}
106-
107-
:host([invalid]) {
108-
[part~='control'] {
109-
border-color: var-get($theme, 'track-error-color');
110-
background: var-get($theme, 'track-error-color');
111-
}
112-
113-
[part~='thumb'] {
114-
background: var-get($theme, 'error-color');
115-
}
116-
117-
[part~='thumb'][part~='checked'] {
118-
background: var-get($theme, 'thumb-on-error-color');
119-
}
120-
121-
[part~='thumb'][part~='focused'] {
122-
&::after {
123-
background: var-get($theme, 'error-color-hover');
124-
}
125-
}
126-
127-
&:hover {
128-
[part~='thumb'] {
129-
&::after {
130-
background: var-get($theme, 'error-color-hover');
131-
}
132-
}
133-
}
134-
}
135-
136-
:host(:not([disabled])[invalid]),
137-
:host(:not(:disabled)[invalid]) {
138-
[part~='control'] {
139-
background: var-get($theme, 'track-error-color');
140-
}
141-
}

‎src/components/common/controllers/drag.ts‎

Lines changed: 47 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,12 @@ import type {
66
import type { Ref } from 'lit/directives/ref.js';
77

88
import { getDefaultLayer } from '../../resize-container/default-ghost.js';
9-
import { findElementFromEventPath, getRoot, roundByDPR } from '../util.js';
9+
import {
10+
findElementFromEventPath,
11+
getRoot,
12+
isLTR,
13+
roundByDPR,
14+
} from '../util.js';
1015

1116
type DragCallback = (parameters: DragCallbackParameters) => unknown;
1217
type DragCancelCallback = (state: DragState) => unknown;
@@ -21,13 +26,20 @@ type State = {
2126
current: DOMRect;
2227
position: { x: number; y: number };
2328
offset: { x: number; y: number };
29+
pointerState: {
30+
previous: { x: number; y: number };
31+
current: { x: number; y: number };
32+
direction: Direction;
33+
};
2434
};
2535

2636
type DragState = State & {
2737
ghost: HTMLElement | null;
2838
element: Element | null;
2939
};
3040

41+
type Direction = 'start' | 'end' | 'bottom' | 'top';
42+
3143
type DragControllerConfiguration = {
3244
/** Whether the drag feature is enabled for the current host. */
3345
enabled?: boolean;
@@ -249,7 +261,11 @@ class DragController implements ReactiveController {
249261
this._createDragGhost();
250262
this._updatePosition(event);
251263

252-
const parameters = { event, state: this._stateParameters };
264+
const parameters = {
265+
event,
266+
state: this._stateParameters,
267+
};
268+
253269
if (this._options.start?.call(this._host, parameters) === false) {
254270
this.dispose();
255271
return;
@@ -265,9 +281,14 @@ class DragController implements ReactiveController {
265281
}
266282

267283
this._updatePosition(event);
284+
this._updatePointerState(event);
268285
this._updateMatcher(event);
269286

270-
const parameters = { event, state: this._stateParameters };
287+
const parameters = {
288+
event,
289+
state: this._stateParameters,
290+
};
291+
271292
this._options.move?.call(this._host, parameters);
272293

273294
this._assignPosition(this._dragItem);
@@ -313,6 +334,11 @@ class DragController implements ReactiveController {
313334
current: structuredClone(rect),
314335
position,
315336
offset,
337+
pointerState: {
338+
previous: { x: clientX, y: clientY },
339+
current: { x: clientX, y: clientY },
340+
direction: 'end',
341+
},
316342
};
317343
}
318344

@@ -383,7 +409,24 @@ class DragController implements ReactiveController {
383409
const posX = this._hasSnapping ? clientX - layerX : clientX - layerX + x;
384410
const posY = this._hasSnapping ? clientY - layerY : clientY - layerY + y;
385411

386-
Object.assign(this._state.position, { x: posX, y: posY });
412+
this._state.position = { x: posX, y: posY };
413+
}
414+
415+
private _updatePointerState({ clientX, clientY }: PointerEvent): void {
416+
const state = this._state.pointerState;
417+
418+
state.previous = { ...state.current };
419+
state.current = { x: clientX, y: clientY };
420+
421+
const dx = state.current.x - state.previous.x;
422+
const dy = state.current.y - state.previous.y;
423+
424+
if (Math.abs(dx) >= Math.abs(dy)) {
425+
const swapHorizontal = isLTR(this._host) ? dx >= 0 : dx <= 0;
426+
state.direction = swapHorizontal ? 'end' : 'start';
427+
} else {
428+
state.direction = dy >= 0 ? 'bottom' : 'top';
429+
}
387430
}
388431

389432
private _assignPosition(element: HTMLElement): void {

‎src/components/icon/icon.spec.ts‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import {
44
expect,
55
fixture,
66
html,
7-
nextFrame,
87
} from '@open-wc/testing';
98
import { stub } from 'sinon';
109

@@ -163,7 +162,7 @@ describe('Icon broadcast service', () => {
163162
const iconName = 'bug';
164163

165164
registerIconFromText(iconName, bugSvg, collectionName);
166-
await nextFrame();
165+
await aTimeout(0);
167166

168167
const { actionType, collections } = first(events).data;
169168
expect(actionType).to.equal(ActionType.RegisterIcon);
@@ -183,7 +182,7 @@ describe('Icon broadcast service', () => {
183182
for (const each of icons) {
184183
registerIconFromText(each[0], each[1], collectionName);
185184
}
186-
await nextFrame();
185+
await aTimeout(0);
187186

188187
expect(events).lengthOf(icons.length);
189188
for (const [idx, event] of events.entries()) {
@@ -207,7 +206,7 @@ describe('Icon broadcast service', () => {
207206
name: 'reference-test',
208207
collection: collectionName,
209208
});
210-
await nextFrame();
209+
await aTimeout(0);
211210

212211
const { actionType, collections, references } = last(events).data;
213212

@@ -227,7 +226,7 @@ describe('Icon broadcast service', () => {
227226
meta.name = 'reference-test';
228227
meta.collection = collectionName;
229228
setIconRef(refName, refCollectionName, meta);
230-
await nextFrame();
229+
await aTimeout(0);
231230

232231
const { actionType, collections, references } = last(events).data;
233232

@@ -250,7 +249,7 @@ describe('Icon broadcast service', () => {
250249
},
251250
overwrite: true,
252251
});
253-
await nextFrame();
252+
await aTimeout(0);
254253

255254
expect(events.length).to.equal(0);
256255
});
@@ -286,7 +285,7 @@ describe('Icon broadcast service', () => {
286285

287286
// a peer is requesting a state sync
288287
channel.postMessage({ actionType: ActionType.SyncState });
289-
await nextFrame();
288+
await aTimeout(0);
290289

291290
expect(events).lengthOf(2); // [ActionType.RegisterIcon, ActionType.SyncState]
292291

@@ -311,7 +310,7 @@ describe('Icon broadcast service', () => {
311310

312311
// a peer is requesting a state sync
313312
channel.postMessage({ actionType: ActionType.SyncState });
314-
await nextFrame();
313+
await aTimeout(0);
315314

316315
expect(events).lengthOf(1); // [ActionType.SyncState]
317316

0 commit comments

Comments
 (0)