Skip to content

Commit 17bdb29

Browse files
ChronosSFChronosSF
authored
Merge branch 'master' into mkirova/fix-hor-scrollbar-calc-19.2.x
2 parents 189fefa + c749f1f commit 17bdb29

File tree

17 files changed

+213
-30
lines changed

17 files changed

+213
-30
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/src/lib/core/styles/components/action-strip/_action-strip-theme.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -200,5 +200,11 @@
200200
igx-icon {
201201
color: var-get($theme, 'delete-action');
202202
}
203+
204+
[igxIconButton] {
205+
igx-icon {
206+
color: var-get($theme, 'delete-action');
207+
}
208+
}
203209
}
204210
}

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

Lines changed: 16 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
}
@@ -389,6 +393,18 @@
389393
@extend %date-last-preview-special !optional;
390394
}
391395

396+
@include e(date, $mods: ('first', 'range-preview', 'active')) {
397+
@extend %date-first-preview-active !optional;
398+
}
399+
400+
@include e(date, $mods: ('last', 'range-preview', 'active')) {
401+
@extend %date-last-preview-active !optional;
402+
}
403+
404+
@include e(date, $mods: ('first', 'last', 'selected')) {
405+
@extend %date-first-last-selected !optional;
406+
}
407+
392408
@include e(date, $mods: ('first', 'range-preview', 'special', 'current')) {
393409
@extend %date-first-preview-special-current !optional;
394410
}

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

Lines changed: 92 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1543,7 +1543,9 @@
15431543
%date-selected-special-active {
15441544
%date-inner {
15451545
&::after {
1546-
border-color: var-get($theme, 'date-selected-special-focus-border-color');
1546+
@if $variant != 'fluent' {
1547+
border-color: var-get($theme, 'date-selected-special-focus-border-color');
1548+
}
15471549
}
15481550
}
15491551
}
@@ -1606,7 +1608,9 @@
16061608
%date-selected-special-current-first-last {
16071609
%date-inner {
16081610
&::after {
1609-
border-color: var-get($theme, 'date-selected-special-border-color');
1611+
@if $variant != 'fluent' {
1612+
border-color: var-get($theme, 'date-selected-special-border-color');
1613+
}
16101614
}
16111615
}
16121616
}
@@ -1779,7 +1783,9 @@
17791783
%date-special-current-selected-active {
17801784
%date-inner {
17811785
&::after {
1782-
border-color: var-get($theme, 'date-selected-special-border-color');
1786+
@if $variant != 'fluent' {
1787+
border-color: var-get($theme, 'date-selected-special-border-color');
1788+
}
17831789
}
17841790
}
17851791
}
@@ -1852,6 +1858,16 @@
18521858
}
18531859
}
18541860

1861+
@if $variant == 'fluent' {
1862+
%date-selected-current-special {
1863+
%date-inner {
1864+
&::after {
1865+
border-color: var-get($theme, 'date-selected-current-background');
1866+
}
1867+
}
1868+
}
1869+
}
1870+
18551871
%date-inactive {
18561872
cursor: default;
18571873

@@ -2007,7 +2023,7 @@
20072023
%date-selected-current-range-special-active:not(%date-selected-current-range-special-first),
20082024
%date-selected-current-range-special-active:not(%date-selected-current-range-special-last) {
20092025
%date-inner {
2010-
@if not $bootstrap-theme {
2026+
@if not $bootstrap-theme and not $variant == 'fluent' {
20112027
color: var-get($theme, 'date-special-focus-foreground');
20122028
}
20132029

@@ -2157,7 +2173,6 @@
21572173
position: absolute;
21582174
height: $date-size;
21592175
width: $date-size;
2160-
border-radius: var-get($theme, 'date-border-radius');
21612176
}
21622177
}
21632178

@@ -2183,7 +2198,32 @@
21832198
&::after {
21842199
width: $date-inner-size;
21852200
height: $date-inner-size;
2186-
border-color: var-get($theme, 'date-selected-special-border-color');
2201+
2202+
@if $variant != 'fluent' {
2203+
border-color: var-get($theme, 'date-selected-special-border-color');
2204+
}
2205+
}
2206+
}
2207+
}
2208+
2209+
@if $variant == 'fluent' {
2210+
%date-first-preview-active {
2211+
%date-inner {
2212+
background: transparent;
2213+
border-inline-end-color: transparent;
2214+
}
2215+
}
2216+
2217+
%date-last-preview-active {
2218+
%date-inner {
2219+
background: transparent;
2220+
border-inline-start-color: transparent;
2221+
}
2222+
}
2223+
2224+
%date-first-last-selected {
2225+
%date-inner {
2226+
background: transparent;
21872227
}
21882228
}
21892229
}
@@ -2303,24 +2343,61 @@
23032343
content: '';
23042344
position: absolute;
23052345
height: $date-size;
2306-
width: calc($date-size / 2 + #{$border-size});
2346+
width: $date-size;
23072347
border: rem(1px) solid var-get($theme, 'date-range-border-color');
23082348
z-index: 3;
23092349
pointer-events: none;
23102350
}
23112351
}
23122352

23132353
%date-range-selected-first {
2354+
%date-inner {
2355+
border-start-end-radius: var-get($theme, 'date-border-radius');
2356+
border-end-end-radius: var-get($theme, 'date-border-radius');
2357+
}
2358+
23142359
&::before {
2315-
inset-inline-end: calc(50% - #{$border-size});
23162360
border-inline-end-color: transparent;
2361+
border-start-start-radius: var-get($theme, 'date-range-border-radius');
2362+
border-end-start-radius: var-get($theme, 'date-range-border-radius');
23172363
}
23182364
}
23192365

23202366
%date-range-selected-last {
2367+
%date-inner {
2368+
border-start-start-radius: var-get($theme, 'date-border-radius');
2369+
border-end-start-radius: var-get($theme, 'date-border-radius');
2370+
}
2371+
23212372
&::before {
2322-
inset-inline-start: calc(50% - #{$border-size});
23232373
border-inline-start-color: transparent;
2374+
border-start-end-radius: var-get($theme, 'date-range-border-radius');
2375+
border-end-end-radius: var-get($theme, 'date-range-border-radius');
2376+
}
2377+
}
2378+
2379+
2380+
%date-first-preview {
2381+
%date-inner {
2382+
border-start-start-radius: var-get($theme, 'date-range-border-radius');
2383+
border-end-start-radius: var-get($theme, 'date-range-border-radius');
2384+
border-start-end-radius: 0;
2385+
border-end-end-radius: 0;
2386+
}
2387+
}
2388+
2389+
%date-last-preview {
2390+
%date-inner {
2391+
border-start-end-radius: var-get($theme, 'date-range-border-radius');
2392+
border-end-end-radius: var-get($theme, 'date-range-border-radius');
2393+
border-start-start-radius: 0;
2394+
border-end-start-radius: 0;
2395+
}
2396+
}
2397+
2398+
%date-first-last {
2399+
%date-inner {
2400+
border-radius: var-get($theme, 'date-range-border-radius');
23242401
}
23252402
}
23262403
}
@@ -2354,6 +2431,12 @@
23542431
}
23552432
}
23562433

2434+
%date-range-preview-inactive {
2435+
%date-inner {
2436+
color: var-get($theme, 'inactive-color');
2437+
}
2438+
}
2439+
23572440
%date-range-preview-current {
23582441
%date-inner {
23592442
color: var-get($theme, 'date-selected-current-range-foreground');

‎projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -327,6 +327,10 @@
327327
margin-inline-start: auto;
328328
gap: rem(8px);
329329

330+
[igxIconButton] {
331+
color: var-get($theme, 'actions-text-color');
332+
}
333+
330334
&:empty {
331335
display: none;
332336
}
@@ -338,6 +342,10 @@
338342
order: 0;
339343
gap: rem(8px);
340344

345+
[igxIconButton] {
346+
color: var-get($theme, 'actions-text-color');
347+
}
348+
341349
&:empty {
342350
display: none;
343351
}

‎projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -425,7 +425,6 @@
425425
justify-content: center;
426426
border-radius: var-get($theme, 'item-border-radius');
427427
color: var-get($theme, 'item-text-color');
428-
background: var-get($theme, 'item-background');
429428

430429
@if $bootstrap-theme or $variant == 'fluent' {
431430
border-bottom: var-get($theme, 'border-width') solid var-get($theme, 'border-color');
@@ -436,9 +435,6 @@
436435
}
437436

438437
&:hover {
439-
color: var-get($theme, 'item-text-color-hover');
440-
background: var-get($theme, 'item-background-hover');
441-
442438
%igx-list__item-lines {
443439
color: currentColor;
444440
}
@@ -544,9 +540,15 @@
544540
align-items: center;
545541
position: relative;
546542
border-radius: var-get($theme, 'item-border-radius');
547-
background: inherit;
543+
background: var-get($theme, 'item-background');
548544
z-index: 2;
549545
gap: if($variant == 'indigo', rem(8px), rem(16px));
546+
547+
&:hover,
548+
&:focus-within {
549+
color: var-get($theme, 'item-text-color-hover');
550+
background: var-get($theme, 'item-background-hover');
551+
}
550552
}
551553

552554
%igx-list-header,

‎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

0 commit comments

Comments
 (0)