Skip to content

Commit 762717d

Browse files
kacheshmarovakacheshmarova
authored
Merge branch 'master' into ikitanov/fix-15306-master
2 parents f458e08 + f153d4d commit 762717d

File tree

13 files changed

+89
-48
lines changed

13 files changed

+89
-48
lines changed

‎CHANGELOG.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ All notable changes for each version of this project will be documented in this
1111
- **Deprecation** - `tabIndex` has been deprecated and will be removed in a future version.
1212
- `IgxGrid`, `IgxHierarchicalGrid`, `IgxTreeGrid`
1313
- A column's `minWidth` and `maxWidth` constrain the user-specified `width` so that it cannot go outside their bounds.
14+
- In SSR mode grid with height 100% or with no height will render on the server with % size and with no data. The grid will show either the empty grid template or the loading indicator (if isLoading is true).
15+
- In SSR mode grid with width 100% or with no width will render on the server with % size and with all columns.
1416

1517
## 19.1.1
1618
### New Features

‎projects/igniteui-angular/migrations/update-19_2_0/changes/theme-changes.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,30 @@
3030
"remove": true,
3131
"owner": "switch-theme",
3232
"type": "property"
33+
},
34+
{
35+
"name": "$date-selected-current-outline",
36+
"remove": true,
37+
"owner": "calendar-theme",
38+
"type": "property"
39+
},
40+
{
41+
"name": "$date-selected-current-hover-outline",
42+
"remove": true,
43+
"owner": "calendar-theme",
44+
"type": "property"
45+
},
46+
{
47+
"name": "$date-selected-current-focus-outline",
48+
"remove": true,
49+
"owner": "calendar-theme",
50+
"type": "property"
51+
},
52+
{
53+
"name": "$date-special-current-border-color",
54+
"remove": true,
55+
"owner": "calendar-theme",
56+
"type": "property"
3357
}
3458
]
3559
}

‎projects/igniteui-angular/migrations/update-19_2_0/index.spec.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,4 +58,27 @@ describe(`Update to ${version}`, () => {
5858
);`
5959
);
6060
});
61+
62+
it('should remove unused properties from the calendar theme', async () => {
63+
const testFilePath = `/testSrc/appPrefix/component/test.component.scss`;
64+
65+
appTree.create(
66+
testFilePath,
67+
`$calendar-theme: calendar-theme(
68+
$date-special-current-border-color: orange,
69+
$date-selected-current-outline: orange,
70+
$date-selected-current-hover-outline: orange,
71+
$date-selected-current-focus-outline: orange,
72+
$content-background: black
73+
);`
74+
);
75+
76+
const tree = await schematicRunner.runSchematic(migrationName, {}, appTree);
77+
78+
expect(tree.readContent(testFilePath)).toEqual(
79+
`$calendar-theme: calendar-theme(
80+
$content-background: black
81+
);`
82+
);
83+
});
6184
});

‎projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -179,6 +179,10 @@
179179
@extend %date-range-preview !optional;
180180
}
181181

182+
@include e(date, $mods: ('range-preview', 'inactive')) {
183+
@extend %date-range-preview-inactive !optional;
184+
}
185+
182186
@include e(date, $mods: ('range-preview', 'current')) {
183187
@extend %date-range-preview-current !optional;
184188
}

‎projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss‎

Lines changed: 6 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -108,10 +108,6 @@
108108
/// @param {Color} $date-selected-current-range-focus-foreground [null] - The :focus foreground of the current date in the selected range.
109109
/// @param {Color} $date-selected-current-range-focus-background [null] - The :focus background of the current date in the selected range.
110110
///
111-
/// @param {Color} $date-selected-current-outline [null] - The outline of the current selected date.
112-
/// @param {Color} $date-selected-current-hover-outline [null] - The :hover outline of the current selected date.
113-
/// @param {Color} $date-selected-current-focus-outline [null] - The :focus outline of the current selected date.
114-
///
115111
/// @param {Color} $date-selected-special-border-color: [null] - The border color of the selected special date,
116112
/// @param {Color} $date-selected-special-hover-border-color: [null] - The :hover border color of the selected special date,
117113
/// @param {Color} $date-selected-special-focus-border-color: [null] - The :focus border color of the selected special date,
@@ -137,8 +133,6 @@
137133
/// @param {Color} $date-special-range-foreground [null] - The foreground of the dates inside a range and marked as special.
138134
/// @param {Color} $date-special-range-border-color [null] - The outline of the dates inside a range and marked as special.
139135
///
140-
/// @param {Color} $date-special-current-border-color [null] - The outline color of a special current date.
141-
///
142136
/// @param {Color} $border-color [null] - The calendar border color.
143137
///
144138
/// @param {Color} $date-border-color [null] - The border color of the date.
@@ -282,10 +276,6 @@
282276
$date-selected-current-hover-border-color: null,
283277
$date-selected-current-focus-border-color: null,
284278
285-
$date-selected-current-outline: null,
286-
$date-selected-current-hover-outline: null,
287-
$date-selected-current-focus-outline: null,
288-
289279
$date-selected-special-border-color: null,
290280
$date-selected-special-hover-border-color: null,
291281
$date-selected-special-focus-border-color: null,
@@ -310,7 +300,6 @@
310300
$date-special-range-focus-background: null,
311301
$date-special-range-foreground: null,
312302
$date-special-range-border-color: null,
313-
$date-special-current-border-color: null,
314303
$date-disabled-foreground: null,
315304
$date-disabled-range-foreground: null,
316305
@@ -400,26 +389,6 @@
400389
}
401390
}
402391

403-
@if $variant == 'material' or $variant == 'indigo' {
404-
@if not($date-selected-current-outline) and $content-background {
405-
@if meta.type-of($content-background) == 'color' {
406-
$date-selected-current-outline: $content-background;
407-
}
408-
}
409-
410-
@if not($date-selected-current-hover-outline) and $content-background {
411-
@if meta.type-of($content-background) == 'color' {
412-
$date-selected-current-hover-outline: $content-background;
413-
}
414-
}
415-
416-
@if not($date-selected-current-focus-outline) and $content-background {
417-
@if meta.type-of($content-background) == 'color' {
418-
$date-selected-current-focus-outline: $content-background;
419-
}
420-
}
421-
}
422-
423392
@if not($content-foreground) and $content-background {
424393
@if meta.type-of($content-background) == 'color' {
425394
$content-foreground: text-contrast($content-background);
@@ -640,10 +609,6 @@
640609
date-selected-current-hover-foreground: $date-selected-current-hover-foreground,
641610
date-selected-current-focus-foreground: $date-selected-current-focus-foreground,
642611

643-
date-selected-current-outline: $date-selected-current-outline,
644-
date-selected-current-hover-outline: $date-selected-current-hover-outline,
645-
date-selected-current-focus-outline: $date-selected-current-focus-outline,
646-
647612
date-selected-special-border-color: $date-selected-special-border-color,
648613
date-selected-special-hover-border-color: $date-selected-special-hover-border-color,
649614
date-selected-special-focus-border-color: $date-selected-special-focus-border-color,
@@ -2389,6 +2354,12 @@
23892354
}
23902355
}
23912356

2357+
%date-range-preview-inactive {
2358+
%date-inner {
2359+
color: var-get($theme, 'inactive-color');
2360+
}
2361+
}
2362+
23922363
%date-range-preview-current {
23932364
%date-inner {
23942365
color: var-get($theme, 'date-selected-current-range-foreground');

‎projects/igniteui-angular/src/lib/grids/grid-base.directive.ts‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3364,12 +3364,26 @@ export abstract class IgxGridBaseDirective implements GridType,
33643364
private get hasZeroResultFilter(): boolean {
33653365
return this.filteredData && this.filteredData.length === 0;
33663366
}
3367+
protected get totalCalcWidth() {
3368+
return this.platform.isBrowser ? this.calcWidth : undefined;
3369+
}
3370+
3371+
protected get renderData() {
3372+
// omit data if not in the browser and size is %
3373+
return !this.platform.isBrowser && this.isPercentHeight ? undefined : this.data;
3374+
}
3375+
3376+
@HostBinding('style.display')
3377+
protected displayStyle = 'grid';
3378+
3379+
@HostBinding('style.grid-template-rows')
3380+
protected templateRows = 'auto auto auto 1fr auto auto';
33673381

33683382
/**
33693383
* @hidden @internal
33703384
*/
33713385
private get hasNoData(): boolean {
3372-
return !this.data || this.dataLength === 0;
3386+
return !this.data || this.dataLength === 0 || !this.platform.isBrowser;
33733387
}
33743388

33753389
/**
@@ -5169,7 +5183,8 @@ export abstract class IgxGridBaseDirective implements GridType,
51695183

51705184
/** @hidden @internal */
51715185
public get totalHeight() {
5172-
return this.calcHeight ? this.calcHeight + this.pinnedRowHeight : this.calcHeight;
5186+
const height = this.calcHeight ? this.calcHeight + this.pinnedRowHeight : this.calcHeight;
5187+
return this.platform.isBrowser ? height : undefined;
51735188
}
51745189

51755190
/**

‎projects/igniteui-angular/src/lib/grids/grid/grid.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
<div class="igx-grid__tbody-content" tabindex="0" [attr.role]="dataView.length ? null : 'row'" (keydown)="navigation.handleNavigation($event)" (focus)="navigation.focusTbody($event)"
3535
(dragStop)="selectionService.dragMode = $event" (scroll)="preventContainerScroll($event)"
3636
(dragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode"
37-
[style.height.px]="totalHeight" [style.width.px]="calcWidth || null" #tbody [attr.aria-activedescendant]="activeDescendant">
37+
[style.height.px]="totalHeight" [style.width.px]="totalCalcWidth" [style.width]="!platform.isBrowser ? '100%' : undefined" #tbody [attr.aria-activedescendant]="activeDescendant">
3838
@if (moving && columnInDrag && pinnedColumns.length <= 0) {
3939
<span
4040
[igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
@@ -70,7 +70,7 @@
7070
}
7171
}
7272
</ng-template>
73-
<ng-template igxGridFor let-rowData [igxGridForOf]="data
73+
<ng-template igxGridFor let-rowData [igxGridForOf]="renderData
7474
| gridTransaction:id:pipeTrigger
7575
| visibleColumns:hasVisibleColumns
7676
| gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger

‎projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
<div class="igx-grid__tbody-content" tabindex="0" (focus)="navigation.focusTbody($event)"
2121
(keydown)="navigation.handleNavigation($event)" (dragStop)="selectionService.dragMode = $event"
2222
(dragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode" [attr.aria-activedescendant]="activeDescendant" [attr.role]="dataView.length ? null : 'row'"
23-
[style.height.px]="totalHeight" [style.width.px]="calcWidth" #tbody (scroll)="preventContainerScroll($event)">
23+
[style.height.px]="totalHeight" [style.width.px]="totalCalcWidth" [style.width]="!platform.isBrowser ? '100%' : undefined" #tbody (scroll)="preventContainerScroll($event)">
2424
@if (moving && columnInDrag && pinnedColumns.length <= 0) {
2525
<span
2626
[igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
@@ -54,7 +54,7 @@
5454
</ng-template>
5555
<ng-container *ngTemplateOutlet="hasPinnedRecords && isRowPinningToTop ? pinnedRecordsTemplate : null">
5656
</ng-container>
57-
<ng-template igxGridFor let-rowData let-rowIndex="index" [igxGridForOf]="data
57+
<ng-template igxGridFor let-rowData let-rowIndex="index" [igxGridForOf]="renderData
5858
| gridTransaction:id:pipeTrigger
5959
| visibleColumns:hasVisibleColumns
6060
| gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger

‎projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
<div class="igx-grid__tbody-content" tabindex="0" [attr.role]="dataView.length ? null : 'row'" (keydown)="navigation.handleNavigation($event)" (focus)="navigation.focusTbody($event)"
2323
(dragStop)="selectionService.dragMode = $event" (scroll)="preventContainerScroll($event)"
2424
(dragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode"
25-
[style.height.px]="totalHeight" [style.width.px]="pivotContentCalcWidth || null" #tbody [attr.aria-activedescendant]="activeDescendant">
25+
[style.height.px]="totalHeight" [style.width.px]="pivotContentCalcWidth || null" [style.width]="!platform.isBrowser ? '100%' : undefined" #tbody [attr.aria-activedescendant]="activeDescendant">
2626
@if (hasMovableColumns && columnInDrag && pinnedColumns.length <= 0) {
2727
<span [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
2828
class="igx-grid__scroll-on-drag-left"></span>
@@ -31,7 +31,7 @@
3131
<span [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
3232
class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"></span>
3333
}
34-
<ng-template igxGridFor let-rowData [igxGridForOf]="data
34+
<ng-template igxGridFor let-rowData [igxGridForOf]="renderData
3535
| pivotGridFilter:pivotConfiguration:filterStrategy:advancedFilteringExpressionsTree:filteringPipeTrigger:pipeTrigger
3636
| pivotGridSort:pivotConfiguration:sortStrategy:pipeTrigger
3737
| pivotGridRow:pivotConfiguration:pivotValueCloneStrategy:expansionStates:pipeTrigger:sortingExpressions

‎projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1290,6 +1290,9 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
12901290

12911291
/** @hidden @internal */
12921292
public get pivotContentCalcWidth() {
1293+
if (!this.platform.isBrowser) {
1294+
return undefined;
1295+
}
12931296
if (!this.visibleRowDimensions.length) {
12941297
return Math.max(0, this.calcWidth - this.pivotRowWidths);
12951298
}

0 commit comments

Comments
 (0)