Skip to content

Commit bba26ce

Browse files
gedinakovagedinakova
committed
Merge branch 'rkaraivanov/wc-chat-wrapper' of https://github.com/IgniteUI/igniteui-angular into rkaraivanov/wc-chat-wrapper
2 parents 945c9a7 + 5bdbb25 commit bba26ce

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+528
-433
lines changed

‎README.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,9 @@ Some of the Angular chart types included are: [Polar chart](https://www.infragis
164164
|18.2.0|25-Oct-24|[Milestone #34](https://github.com/IgniteUI/igniteui-angular/blob/master/ROADMAP.md#milestone-34-version-182-released-oct-25th-2024)|
165165
|19.0.0|25-Nov-24|[Milestone #35](https://github.com/IgniteUI/igniteui-angular/blob/master/ROADMAP.md#milestone-35-version-190-released-nov-25th-2024)|
166166
|19.1.0|27-Feb-25|[Milestone #36](https://github.com/IgniteUI/igniteui-angular/blob/master/ROADMAP.md#milestone-36--version-191-released-feb-27th-2025)|
167-
|19.2.0|16-Apr-25|[Milestone #37]()|
167+
|19.2.0|16-Apr-25|[Milestone #37](https://github.com/IgniteUI/igniteui-angular/blob/master/ROADMAP.md#milestone-37--version-192-released-apr-16th-2025-release-blog-192)|
168+
|20.0.0|09-Jun-25|[Milestone #38](https://github.com/IgniteUI/igniteui-angular/blob/master/ROADMAP.md#milestone-38-version-200-released-jun-09th-2025)|
169+
|20.1.0|25-Sep-25|[Milestone #39](https://github.com/IgniteUI/igniteui-angular/blob/master/ROADMAP.md#milestone-39-version-201-released-sep--25th-2025)|
168170

169171

170172
### Components available in [igniteui-angular-charts](https://www.npmjs.com/package/igniteui-angular-charts)

‎package-lock.json‎

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

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@
7676
"dompurify": "^3.3.0",
7777
"express": "^5.1.0",
7878
"fflate": "^0.8.1",
79-
"igniteui-theming": "^21.0.2",
79+
"igniteui-theming": "^22.0.0",
8080
"igniteui-trial-watermark": "^3.1.0",
8181
"lodash-es": "^4.17.21",
8282
"marked": "^16.4.0",

‎projects/igniteui-angular-elements/src/app/custom-strategy.spec.ts‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ import {
1212
IgcPaginatorComponent,
1313
IgcGridStateComponent,
1414
IgcColumnLayoutComponent,
15+
IgcActionStripComponent,
16+
IgcGridEditingActionsComponent,
1517
} from './components';
1618
import { defineComponents } from '../utils/register';
1719

@@ -27,6 +29,8 @@ describe('Elements: ', () => {
2729
IgcColumnLayoutComponent,
2830
IgcPaginatorComponent,
2931
IgcGridStateComponent,
32+
IgcActionStripComponent,
33+
IgcGridEditingActionsComponent
3034
);
3135
});
3236

@@ -230,5 +234,66 @@ describe('Elements: ', () => {
230234
expect(grid.columns.length).toEqual(6);
231235
expect(grid.getColumnByVisibleIndex(1).field).toEqual('ProductName');
232236
});
237+
238+
it('should not destroy action strip when row it is shown in is destroyed or cached.', async() => {
239+
const innerHtml = `
240+
<igc-grid id="testGrid" auto-generate>
241+
<igc-action-strip id="testStrip">
242+
<igc-grid-editing-actions add-row="true"></igc-grid-editing-actions>
243+
</igc-action-strip>
244+
</igc-grid>`;
245+
testContainer.innerHTML = innerHtml;
246+
247+
// TODO: Better way to wait - potentially expose the queue or observable for update on the strategy
248+
await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 3));
249+
250+
const grid = document.querySelector<IgcNgElement & InstanceType<typeof IgcGridComponent>>('#testGrid');
251+
const actionStrip = document.querySelector<IgcNgElement & InstanceType<typeof IgcActionStripComponent>>('#testStrip');
252+
grid.data = SampleTestData.foodProductData();
253+
254+
// TODO: Better way to wait - potentially expose the queue or observable for update on the strategy
255+
await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 3));
256+
257+
let row = grid.dataRowList.toArray()[0];
258+
actionStrip.show(row);
259+
await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 3));
260+
261+
expect(actionStrip.hidden).toBeFalse();
262+
263+
grid.data = [];
264+
await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 3));
265+
266+
// row destroyed
267+
expect((row.cdr as any).destroyed).toBeTrue();
268+
// action strip still in DOM, only hidden.
269+
expect(actionStrip.hidden).toBeTrue();
270+
expect(actionStrip.isConnected).toBeTrue();
271+
272+
grid.data = SampleTestData.foodProductData();
273+
grid.groupBy({ fieldName: 'InStock', dir: 1, ignoreCase: false });
274+
275+
// TODO: Better way to wait - potentially expose the queue or observable for update on the strategy
276+
await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 3));
277+
278+
row = grid.dataRowList.toArray()[0];
279+
actionStrip.show(row);
280+
await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 3));
281+
282+
expect(actionStrip.hidden).toBeFalse();
283+
284+
// collapse all data rows, leave only groups
285+
grid.toggleAllGroupRows();
286+
287+
// TODO: Better way to wait - potentially expose the queue or observable for update on the strategy
288+
await firstValueFrom(timer(10 /* SCHEDULE_DELAY */ * 3));
289+
290+
// row not destroyed, but also not in dom anymore
291+
expect((row.cdr as any).destroyed).toBeFalse();
292+
expect(row.element.nativeElement.isConnected).toBe(false);
293+
294+
// action strip still in DOM, only hidden.
295+
expect(actionStrip.hidden).toBeTrue();
296+
expect(actionStrip.isConnected).toBeTrue();
297+
});
233298
});
234299
});

‎projects/igniteui-angular-elements/src/public_api.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { IgxPivotDateDimension } from 'projects/igniteui-angular/src/lib/grids/p
1212
import { PivotDimensionType } from 'projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.interface';
1313
import { IgxDateSummaryOperand, IgxNumberSummaryOperand, IgxSummaryOperand, IgxTimeSummaryOperand } from 'projects/igniteui-angular/src/lib/grids/summaries/grid-summary';
1414
import { HorizontalAlignment, VerticalAlignment } from 'projects/igniteui-angular/src/lib/services/overlay/utilities';
15-
import { ByLevelTreeGridMergeStrategy, DefaultTreeGridMergeStrategy } from 'projects/igniteui-angular/src/lib/data-operations/merge-strategy';
15+
import { ByLevelTreeGridMergeStrategy, DefaultMergeStrategy, DefaultTreeGridMergeStrategy } from 'projects/igniteui-angular/src/lib/data-operations/merge-strategy';
1616

1717
/** Export Public API, TODO: reorganize, Generate all w/ renames? */
1818
export {
@@ -35,6 +35,7 @@ export {
3535

3636
NoopSortingStrategy as IgcNoopSortingStrategy,
3737
NoopFilteringStrategy as IgcNoopFilteringStrategy,
38+
DefaultMergeStrategy as IgcDefaultMergeStrategy,
3839
DefaultTreeGridMergeStrategy as IgcDefaultTreeGridMergeStrategy,
3940
ByLevelTreeGridMergeStrategy as IgcByLevelTreeGridMergeStrategy,
4041

‎projects/igniteui-angular/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@
7373
"tslib": "^2.3.0",
7474
"igniteui-trial-watermark": "^3.1.0",
7575
"lodash-es": "^4.17.21",
76-
"igniteui-theming": "^21.0.2",
76+
"igniteui-theming": "^22.0.0",
7777
"@igniteui/material-icons-extended": "^3.1.0"
7878
},
7979
"peerDependencies": {

‎projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.spec.ts‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { IgxGridPinningActionsComponent } from './grid-pinning-actions.component
1515
import { IgxActionStripComponent } from '../action-strip.component';
1616
import { IRowDataCancelableEventArgs, IgxColumnComponent } from '../../grids/public_api';
1717
import { SampleTestData } from '../../test-utils/sample-test-data.spec';
18+
import { SortingDirection } from '../../data-operations/sorting-strategy';
1819

1920
describe('igxGridEditingActions #grid ', () => {
2021
let fixture;
@@ -274,6 +275,59 @@ describe('igxGridEditingActions #grid ', () => {
274275

275276
expect(actionStrip.hidden).toBeTrue();
276277
});
278+
279+
it('should auto-hide on delete action click.', () => {
280+
const row = grid.rowList.toArray()[0];
281+
actionStrip.show(row);
282+
fixture.detectChanges();
283+
284+
expect(actionStrip.hidden).toBeFalse();
285+
286+
const deleteIcon = fixture.debugElement.queryAll(By.css(`igx-grid-editing-actions igx-icon`))[1];
287+
expect(deleteIcon.nativeElement.innerText).toBe('delete');
288+
deleteIcon.parent.triggerEventHandler('click', new Event('click'));
289+
fixture.detectChanges();
290+
291+
expect(actionStrip.hidden).toBeTrue();
292+
293+
});
294+
295+
it('should auto-hide if context row is destroyed.', () => {
296+
const row = grid.rowList.toArray()[0];
297+
actionStrip.show(row);
298+
fixture.detectChanges();
299+
300+
expect(actionStrip.hidden).toBeFalse();
301+
302+
// bind to no data, which removes all rows.
303+
grid.data = [];
304+
grid.cdr.detectChanges();
305+
306+
expect((row.cdr as any).destroyed).toBeTrue();
307+
expect(actionStrip.hidden).toBeTrue();
308+
});
309+
310+
it('should auto-hide if context row is cached.', () => {
311+
// create group rows
312+
grid.groupBy({ fieldName: 'ContactTitle', dir: SortingDirection.Desc, ignoreCase: false });
313+
fixture.detectChanges();
314+
315+
// show for first data row
316+
const row = grid.dataRowList.toArray()[0];
317+
actionStrip.show(row);
318+
fixture.detectChanges();
319+
320+
// collapse all groups to cache data rows
321+
grid.toggleAllGroupRows();
322+
fixture.detectChanges();
323+
324+
// not destroyed, but not in DOM anymore
325+
expect((row.cdr as any).destroyed).toBeFalse();
326+
expect(row.element.nativeElement.isConnected).toBe(false);
327+
328+
// action strip should be hidden
329+
expect(actionStrip.hidden).toBeTrue();
330+
});
277331
});
278332

279333
describe('auto show/hide in HierarchicalGrid', () => {

‎projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss‎

Lines changed: 0 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -2,64 +2,6 @@
22
@use '../../base' as *;
33
@use '../../themes/schemas' as *;
44

5-
////
6-
/// @group themes
7-
/// @access public
8-
/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
9-
/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
10-
////
11-
12-
/// If only background color is specified, text/icon color will be assigned automatically to a contrasting color.
13-
/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
14-
///
15-
/// @param {Color} $icon-color [null] - The color used for the actions icons.
16-
/// @param {Color} $background [null] - The color used for the action strip component content background.
17-
/// @param {Color} $actions-background [null] - The color used for the actions background.
18-
/// @param {Color} $delete-action [null] - The color used for the delete icon in action strip component.
19-
/// @param {List} $actions-border-radius [null] - The border radius used for actions container inside action strip component.
20-
///
21-
/// @example scss Change the background and icon colors in action strip
22-
/// $my-action-strip-theme: action-strip-theme($background: black);
23-
/// // Pass the theme to the css-vars() mixin
24-
/// @include css-vars($my-action-strip-theme);
25-
@function action-strip-theme(
26-
$schema: $light-material-schema,
27-
28-
$background: null,
29-
$actions-background: null,
30-
$icon-color: null,
31-
$delete-action: null,
32-
$actions-border-radius: null,
33-
) {
34-
$name: 'igx-action-strip';
35-
$action-strip-schema: ();
36-
37-
@if map.has-key($schema, 'action-strip') {
38-
$action-strip-schema: map.get($schema, 'action-strip');
39-
} @else {
40-
$action-strip-schema: $schema;
41-
}
42-
43-
$theme: digest-schema($action-strip-schema);
44-
45-
@if not($icon-color) and $actions-background {
46-
$icon-color: adaptive-contrast(var(--actions-background));
47-
}
48-
49-
@if not($actions-border-radius) {
50-
$actions-border-radius: map.get($theme, 'actions-border-radius');
51-
}
52-
53-
@return extend($theme, (
54-
name: $name,
55-
background: $background,
56-
actions-background: $actions-background,
57-
icon-color: $icon-color,
58-
delete-action: $delete-action,
59-
actions-border-radius: $actions-border-radius,
60-
));
61-
}
62-
635
/// @deprecated Use the `css-vars` mixin instead.
646
/// @see {mixin} css-vars
657
/// @param {Map} $theme - The theme used to style the component.

‎projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -247,7 +247,6 @@
247247
background: var-get($theme, 'indicator-dot-color');
248248

249249
@if $variant != 'indigo' {
250-
@include animation('scale-out-center' .15s $ease-out-quad forwards);
251250
inset: rem(1px);
252251
} @else {
253252
width: rem(8px);
@@ -261,11 +260,11 @@
261260
&:hover {
262261
border-color: var-get($theme, 'indicator-active-border-color');
263262

264-
@if $variant == 'indigo' {
265-
&::after {
266-
background: var-get($theme, 'indicator-hover-dot-color');
267-
}
263+
&::after {
264+
background: var-get($theme, 'indicator-hover-dot-color');
265+
}
268266

267+
@if $variant == 'indigo' {
269268
&::before {
270269
position: absolute;
271270
content: '';
@@ -290,7 +289,7 @@
290289
content: '';
291290
width: inherit;
292291
height: inherit;
293-
border: rem(2px) solid var-get($theme, 'indicator-active-dot-color');
292+
border: rem(2px) solid var-get($theme, 'indicator-active-border-color');
294293
inset-inline-start: 0;
295294
top: 0;
296295
border-radius: border-radius(50%);
@@ -304,12 +303,14 @@
304303
}
305304
}
306305

307-
@if $variant == 'indigo' {
308-
&:hover {
309-
&::after {
310-
background: var-get($theme, 'indicator-active-hover-dot-color');
311-
}
306+
&:hover {
307+
border-color: var-get($theme, 'indicator-active-hover-dot-color');
312308

309+
&::after {
310+
background: var-get($theme, 'indicator-active-hover-dot-color');
311+
}
312+
313+
@if $variant == 'indigo' {
313314
&::before {
314315
border-color: var-get($theme, 'indicator-active-hover-dot-color');
315316
}

‎projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* stylelint-disable max-nesting-depth */
12
@use 'sass:map';
23
@use 'sass:math';
34
@use '../../base' as *;
@@ -49,13 +50,6 @@
4950
'indigo': rem(8px),
5051
), $variant);
5152

52-
$mark-stroke: map.get((
53-
'material': 3,
54-
'fluent': 1,
55-
'bootstrap': 3,
56-
'indigo': 3,
57-
), $variant);
58-
5953
$mark-offset: map.get((
6054
'material': 0,
6155
'fluent': -1px,
@@ -64,7 +58,7 @@
6458
), $variant);
6559

6660
$mark-length: 24;
67-
$mark-x-factor: math.div($mark-stroke, $mark-length);
61+
$mark-x-factor: calc(#{var-get($theme, 'tick-width')} / $mark-length);
6862

6963
$ripple-size: rem(40px);
7064
$ripple-radius: math.div($ripple-size, 2);
@@ -205,7 +199,7 @@
205199
inset: 0;
206200
stroke: var-get($theme, 'tick-color');
207201
stroke-linecap: square;
208-
stroke-width: $mark-stroke;
202+
stroke-width: var-get($theme, 'tick-width');
209203
stroke-dasharray: $mark-length;
210204
stroke-dashoffset: $mark-length;
211205
fill: none;
@@ -366,7 +360,7 @@
366360
%cbx-composite-mark--in {
367361
stroke-dashoffset: 41; /* length of path - adjacent line length */
368362
opacity: 1;
369-
transform: rotate(45deg) translateX(-#{$mark-x-factor}em);
363+
transform: rotate(45deg) translateX(calc(#{$mark-x-factor} * -1em));
370364
}
371365

372366
%cbx-composite-mark--fluent {

0 commit comments

Comments
 (0)