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

Author: hanastasov

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

@@ -285,6 +285,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 {
@@ -258,6 +268,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/test-utils/grid-mch-sample.spec.ts

@@ -660,3 +660,36 @@ export class NestedColGroupsWithTemplatesGridComponent {
 
     public data = SampleTestData.contactInfoDataFull();
 }
+
+@Component({
+    template: `
+    <igx-grid #grid [data]="data" height="500px" >
+        <igx-column field="ID"></igx-column>
+        <igx-column-group header="General Information" [hidden]="true">
+            <igx-column [filterable]="true" [sortable]="true" [resizable]="true" field="CompanyName"></igx-column>
+            <igx-column-group header="Person Details">
+                <igx-column [filterable]="true" [sortable]="true" [resizable]="true" field="ContactName"></igx-column>
+                <igx-column [filterable]="true" [sortable]="true" [resizable]="true" field="ContactTitle"></igx-column>
+            </igx-column-group>
+        </igx-column-group>
+        <igx-column-group header="Address Information">
+            <igx-column-group header="Location" [hidden]="true">
+                <igx-column [filterable]="true" [sortable]="true" [resizable]="true" field="Country"></igx-column>
+                <igx-column [filterable]="true" [sortable]="true" [resizable]="true" field="Region"></igx-column>
+            </igx-column-group>
+                <igx-column [filterable]="true" [sortable]="true" [resizable]="true" field="City"></igx-column>
+                <igx-column [filterable]="true" [sortable]="true" [resizable]="true" field="Address"></igx-column>
+            <igx-column-group header="Contact Information">
+                <igx-column [filterable]="true" [sortable]="true" [resizable]="true" field="Phone"></igx-column>
+                <igx-column [filterable]="true" [sortable]="true" [resizable]="true" field="Fax"></igx-column>
+                <igx-column [filterable]="true" [sortable]="true" [resizable]="true" field="PostalCode"></igx-column>
+            </igx-column-group>
+        </igx-column-group>
+        <igx-column-group #emptyColGroup header="Empty Header">
+        </igx-column-group>
+    </igx-grid>
+    `,
+    standalone: true,
+    imports: [IgxGridComponent, IgxColumnGroupComponent, IgxColumnComponent]
+})
+export class ColumnGroupHiddenInTemplateComponent extends ColumnGroupTestComponent { }