Merge branch '18.1.x' into mkirkova/fix-14724-18.1.x

Author: hanastasov

projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss

@@ -98,7 +98,7 @@
         --size: #{rem(22px)};
         --_badge-size: var(--size);
 
-        display: flex;
+        display: inline-flex;
         justify-content: center;
         align-items: center;
         min-width: var(--_badge-size);
@@ -138,7 +138,7 @@
 
     %igx-badge-value {
         white-space: nowrap;
-        padding: $badge-value-padding;
+        padding-inline: $badge-value-padding;
     }
 
     %igx-badge--success {

projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss

@@ -146,6 +146,11 @@
         flex-wrap: wrap;
         align-self: flex-end;
         gap: rem(8px);
+
+        > a {
+            display: inline-flex;
+            align-items: center;
+        }
     }
 }
 

projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss

@@ -158,6 +158,8 @@
         }
 
         @include mx(textarea-group, placeholder) {
+            @extend %form-group-placeholder !optional;
+
             @include e(notch) {
                 @extend %textarea-group-notch--focused !optional;
             }
@@ -178,6 +180,8 @@
         }
 
         @include mx(textarea-group, placeholder, border) {
+            @extend %form-group-placeholder !optional;
+
             @include e(notch) {
                 @extend %textarea-group-notch--focused !optional;
             }
@@ -212,6 +216,8 @@
         }
 
         @include m(placeholder) {
+            @extend %form-group-placeholder !optional;
+
             @include e(label) {
                 @extend %form-group-label--float !optional;
                 @extend %form-group-label--fixed !optional;
@@ -381,6 +387,8 @@
         }
 
         @include mx(box, textarea-group, placeholder) {
+            @extend %form-group-placeholder !optional;
+
             @include e(notch) {
                 @extend %form-group-notch--box-textarea !optional;
             }
@@ -460,6 +468,7 @@
 
         @include mx(border, placeholder) {
             @extend %form-group-label--placeholder-border !optional;
+            @extend %form-group-placeholder !optional;
 
             @include e(label) {
                 @extend %form-group-label--float-border !optional;
@@ -580,6 +589,8 @@
         }
 
         @include mx(fluent, placeholder) {
+            @extend %form-group-placeholder !optional;
+
             @include e(label) {
                 @extend %fluent-placeholder-label !optional;
             }

projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss

@@ -462,6 +462,18 @@
         }
     }
 
+    %form-group-placeholder {
+        %form-group-label {
+            transition: none !important;
+        }
+    }
+
+    %form-group-display:not(%form-group-display--filled) {
+        %form-group-label {
+            transition: all $transition-timing;
+        }
+    }
+
     %form-group-display--no-margin {
         margin-block-start: 0;
     }
@@ -883,7 +895,6 @@
         backface-visibility: hidden;
         will-change: transform;
         transform-origin: top left;
-        transition: all $transition-timing;
         margin-inline-start: pad-inline(0, rem(-2px), rem(-4px));
     }
 

projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss

@@ -213,7 +213,7 @@
         background: var-get($theme, 'background');
         top: 0;
         bottom: 0;
-        width: var(--igx-nav-drawer-size);
+        min-width: var(--igx-nav-drawer-size);
         inset-inline-start: 0;
         z-index: 999;
         transition: width, padding, transform;
@@ -280,15 +280,20 @@
 
     %aside--mini {
         transition-duration: .2s, .2s;
-        width: var(--igx-nav-drawer-size--mini);
+        min-width: var(--igx-nav-drawer-size--mini);
 
         %item {
             justify-content: center;
 
+            @if $variant == 'bootstrap' {
+                width: rem(56px);
+            }
+
             @if $variant == 'indigo' {
-                //max-width: rem(32px);
+                width: rem(32px);
+
                 // important is needed to override the typography margins
-                margin: rem(14px) auto !important;
+                margin: rem(4px) auto !important;
             }
 
             igx-icon {

projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss

@@ -350,7 +350,7 @@
         }
 
         @if $bootstrap-theme {
-            border: rem(1px) solid transparent;
+            padding-block: rem(12px);
             border-start-start-radius: var-get($theme, 'border-radius');
             border-start-end-radius: var-get($theme, 'border-radius');
         }

projects/igniteui-angular/src/lib/grids/columns/column-group.component.ts

@@ -312,6 +312,9 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
             if (this.pinned) {
                 child.pinned = this.pinned;
             }
+            if (this._hidden) {
+                child.hidden = this._hidden;
+            }
         });
         if (this.collapsible) {
             this.setExpandCollapseState();

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-filtering.component.ts

@@ -221,6 +221,16 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent
 
     /**
      * Gets the minimum height.
+     * 
+     * Setting value in template: 
+     * ```ts
+     * [minHeight]="'<number><unit (px|rem|etc..)>'" 
+     * ```
+     * 
+     * Example for setting a value: 
+     * ```ts
+     * [minHeight]="'700px'"
+     * ```
      */
     @Input()
     public get minHeight(): string {
@@ -248,6 +258,16 @@ export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent
 
     /**
      * Gets the maximum height.
+     * 
+     * Setting value in template: 
+     * ```ts
+     * [maxHeight]="'<number><unit (px|rem|etc..)>'" 
+     * ```
+     * 
+     * Example for setting a value: 
+     * ```ts
+     * [maxHeight]="'700px'"
+     * ```
      */
     @Input()
     @HostBinding('style.max-height')

projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts

@@ -18,7 +18,8 @@ import { OneGroupOneColGridComponent, OneGroupThreeColsGridComponent,
     NestedColGroupsGridComponent, StegosaurusGridComponent,
     OneColPerGroupGridComponent, NestedColumnGroupsGridComponent,
     DynamicGridComponent, NestedColGroupsWithTemplatesGridComponent,
-    DynamicColGroupsGridComponent } from '../../test-utils/grid-mch-sample.spec';
+    DynamicColGroupsGridComponent,
+    ColumnGroupHiddenInTemplateComponent} from '../../test-utils/grid-mch-sample.spec';
 import { CellType } from '../common/grid.interface';
 
 const GRID_COL_THEAD_TITLE_CLASS = 'igx-grid-th__title';
@@ -47,7 +48,8 @@ describe('IgxGrid - multi-column headers #grid', () => {
                 NestedColumnGroupsGridComponent,
                 DynamicGridComponent,
                 NestedColGroupsWithTemplatesGridComponent,
-                DynamicColGroupsGridComponent
+                DynamicColGroupsGridComponent,
+                ColumnGroupHiddenInTemplateComponent
             ]
         })
         .compileComponents();
@@ -392,6 +394,20 @@ describe('IgxGrid - multi-column headers #grid', () => {
             expect(generalHeader.nativeElement.firstElementChild.title).toBe('General Information Title');
             expect(addressHeader.nativeElement.firstElementChild.title).toBe('Address Information');
         });
+
+        it('should hide column group when hidden property is set to true in the template - parent and child level', () => {
+            fixture = TestBed.createComponent(ColumnGroupHiddenInTemplateComponent);
+            fixture.detectChanges();
+
+            grid = fixture.componentInstance.grid;
+            const generalGroup = grid.columnList.find(c => c.header === 'General Information');
+            const locationGroup = grid.columnList.find(c => c.header === 'Location');
+            expect(generalGroup.hidden).toBe(true);
+            expect(locationGroup.hidden).toBe(true);
+
+            expect(GridFunctions.getColumnHeaders(fixture).length).toEqual(6);
+            expect(GridFunctions.getColumnGroupHeaders(fixture).length).toEqual(2);
+        });
     });
 
     describe('Columns widths tests (1 group 1 column) ', () => {

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

@@ -2160,6 +2160,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         });
 
         this.updateColumns(columns);
+        this.pipeTrigger++;
         this.reflow();
         if (data && data.length > 0) {
             this.shouldGenerate = false;