chore(*): moving hostbindings to template for ivy

ChronosSF · ChronosSF · commit 76f27475162c · 2019-10-10T11:50:12.000+03:00
diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.ts b/projects/igniteui-angular/src/lib/grids/cell.component.ts
@@ -417,9 +417,6 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
      * ```
      * @memberof IgxGridCellComponent
      */
-    @HostBinding('style.min-width')
-    @HostBinding('style.max-width')
-    @HostBinding('style.flex-basis')
     @Input()
     width = '';
 
diff --git a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts
@@ -313,7 +313,7 @@ export class IgxColumnComponent implements AfterContentInit {
             this._calcWidth = null;
             this.calcPixelWidth = NaN;
             this.widthSetByUser = true;
-            this._width = value;
+            this._width = typeof(value) === 'number' ? value + 'px' : value;
             if (this.grid) {
                 this.cacheCalcWidth();
             }
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts
@@ -4278,7 +4278,7 @@ export class IgxGridBaseComponent extends DisplayDensityBase implements
                 const columnWidthCombined = parseInt(this._columnWidth, 10) * (column.colEnd ? column.colEnd - column.colStart : 1);
                 column.defaultWidth = columnWidthCombined + 'px';
             } else {
-                column.defaultWidth = this._columnWidth;
+                column.defaultWidth = this._columnWidth + 'px';
                 column.resetCaches();
             }
         });
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html
@@ -31,8 +31,9 @@
             [lastPinned]="col.isLastPinned"
             [style.min-height.px]="grid.rowHeight || 32"
             [rowData]="rowData"
-            [style.min-width.px]="col.width"
-            [style.flex-basis.px]="col.width"
+            [style.min-width]="col.width"
+            [style.max-width]="col.width"
+            [style.flex-basis]="col.width"
             [width]="col.getCellWidth()"
             [visibleColumnIndex]="col.visibleIndex"
             [value]="rowData[col.field]"
@@ -51,8 +52,9 @@
             [row]="this"
             [style.min-height.px]="grid.rowHeight || 32"
             [rowData]="rowData"
-            [style.min-width.px]="col.width"
-            [style.flex-basis.px]="col.width"
+            [style.min-width]="col.width"
+            [style.max-width]="col.width"
+            [style.flex-basis]="col.width"
             [width]="col.getCellWidth()"
             [visibleColumnIndex]="col.visibleIndex"
             [value]="rowData[col.field]"
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html
@@ -73,16 +73,16 @@
             </ng-container>
             <ng-container *ngIf="pinnedColumns.length > 0">
                 <ng-template ngFor let-col [ngForOf]="pinnedColumns | igxTopLevel">
-                    <igx-grid-header-group [column]="col" [gridID]="id" [style.min-width.px]="getHeaderGroupWidth(col)"
-                        [style.flex-basis.px]="getHeaderGroupWidth(col)"></igx-grid-header-group>
+                    <igx-grid-header-group [column]="col" [gridID]="id" [style.min-width]="getHeaderGroupWidth(col)"
+                        [style.flex-basis]="getHeaderGroupWidth(col)"></igx-grid-header-group>
                 </ng-template>
             </ng-container>
             <ng-template igxGridFor let-col [igxGridForOf]="unpinnedColumns | igxTopLevel"
                 [igxForScrollOrientation]="'horizontal'" [igxForScrollContainer]="parentVirtDir"
                 [igxForContainerSize]='unpinnedWidth' [igxForTrackBy]='trackColumnChanges'
                 [igxForSizePropName]='"calcPixelWidth"' #headerContainer>
-                <igx-grid-header-group [column]="col" [gridID]="id" [style.min-width.px]="getHeaderGroupWidth(col)"
-                    [style.flex-basis.px]="getHeaderGroupWidth(col)"></igx-grid-header-group>
+                <igx-grid-header-group [column]="col" [gridID]="id" [style.min-width]="getHeaderGroupWidth(col)"
+                    [style.flex-basis]="getHeaderGroupWidth(col)"></igx-grid-header-group>
             </ng-template>
         </div>
         <igx-grid-filtering-row #filteringRow [style.width.px]='calcWidth' *ngIf="filteringService.isFilterRowVisible"
diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html b/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html
@@ -38,8 +38,8 @@
             <igx-grid-header-group *ngIf="!child.hidden" class="igx-grid__thead-subgroup"
                                 [column]="child"
                                 [gridID]="child.grid.id"
-                                [style.min-width.px]="grid.getHeaderGroupWidth(child)"
-                                [style.flex-basis.px]="grid.getHeaderGroupWidth(child)">
+                                [style.min-width]="grid.getHeaderGroupWidth(child)"
+                                [style.flex-basis]="grid.getHeaderGroupWidth(child)">
             </igx-grid-header-group>
         </ng-container>
     </div>
diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.ts b/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.ts
@@ -105,8 +105,6 @@ export class IgxGridHeaderGroupComponent implements DoCheck {
      * Gets the width of the header group.
      * @memberof IgxGridHeaderGroupComponent
      */
-    @HostBinding('style.min-width')
-    @HostBinding('style.flex-basis')
     get width() {
         return this.grid.getHeaderGroupWidth(this.column);
     }
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html
@@ -46,16 +46,16 @@
             </ng-container>
             <ng-container *ngIf="pinnedColumns.length > 0">
                 <ng-template ngFor let-col [ngForOf]="pinnedColumns | igxTopLevel">
-                    <igx-grid-header-group [column]="col" [gridID]="id" [style.min-width.px]="getHeaderGroupWidth(col)"
-                        [style.flex-basis.px]="getHeaderGroupWidth(col)"></igx-grid-header-group>
+                    <igx-grid-header-group [column]="col" [gridID]="id" [style.min-width]="getHeaderGroupWidth(col)"
+                        [style.flex-basis]="getHeaderGroupWidth(col)"></igx-grid-header-group>
                 </ng-template>
             </ng-container>
             <ng-template igxGridFor let-col [igxGridForOf]="unpinnedColumns | igxTopLevel"
                 [igxForScrollOrientation]="'horizontal'" [igxForScrollContainer]="parentVirtDir"
                 [igxForContainerSize]='unpinnedWidth' [igxForTrackBy]='trackColumnChanges'
                 [igxForSizePropName]='"calcPixelWidth"' #headerContainer>
-                <igx-grid-header-group [column]="col" [gridID]="id" [style.min-width.px]="getHeaderGroupWidth(col)"
-                    [style.flex-basis.px]="getHeaderGroupWidth(col)"></igx-grid-header-group>
+                <igx-grid-header-group [column]="col" [gridID]="id" [style.min-width]="getHeaderGroupWidth(col)"
+                    [style.flex-basis]="getHeaderGroupWidth(col)"></igx-grid-header-group>
             </ng-template>
         </div>
         <igx-grid-filtering-row #filteringRow [style.width.px]='calcWidth' *ngIf="filteringService.isFilterRowVisible"
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html
@@ -45,8 +45,9 @@
         [lastPinned]="col.isLastPinned"
         [style.min-height.px]="grid.rowHeight || 32"
         [rowData]="rowData"
-        [style.min-width.px]="col.width"
-        [style.flex-basis.px]="col.width"
+        [style.min-width]="col.width"
+        [style.max-width]="col.width"
+        [style.flex-basis]="col.width"
         [width]="col.getCellWidth()"
         [visibleColumnIndex]="col.visibleIndex"
         [value]="rowData[col.field]"
@@ -66,8 +67,9 @@
         [row]="this"
         [style.min-height.px]="grid.rowHeight || 32"
         [rowData]="rowData"
-        [style.min-width.px]="col.width"
-        [style.flex-basis.px]="col.width"
+        [style.min-width]="col.width"
+        [style.max-width]="col.width"
+        [style.flex-basis]="col.width"
         [width]="col.getCellWidth()"
         [visibleColumnIndex]="col.visibleIndex"
         [value]="rowData[col.field]"
diff --git a/projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.ts b/projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.ts
@@ -128,9 +128,6 @@ export class IgxSummaryCellComponent {
         }
     }
 
-    @HostBinding('style.min-width')
-    @HostBinding('style.max-width')
-    @HostBinding('style.flex-basis')
     get width() {
         return this.column.getCellWidth();
     }
diff --git a/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.html b/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.html
@@ -20,7 +20,10 @@
             [hasSummary]="col.hasSummary"
             [density]="grid.displayDensity"
             [style.max-height.px]="minHeight"
-            [style.min-height.px]="minHeight">
+            [style.min-height.px]="minHeight"
+            [style.min-width]="col.getCellWidth()"
+            [style.max-width]="col.getCellWidth()"
+            [style.flex-basis]="col.getCellWidth()">
         </igx-grid-summary-cell>
     </ng-container>
     <ng-template igxGridFor let-col [igxGridForOf]="unpinnedColumns | igxNotGrouped" [igxForScrollContainer]="grid.parentVirtDir" let-colIndex="index" [igxForScrollOrientation]="'horizontal'" [igxForContainerSize]="grid.unpinnedWidth" [igxForTrackBy]="grid.trackColumnChanges" [igxForSizePropName]='"calcPixelWidth"' #igxDirRef>
@@ -36,7 +39,10 @@
             [hasSummary]="col.hasSummary"
             [density]="grid.displayDensity"
             [style.max-height.px]="minHeight"
-            [style.min-height.px]="minHeight">
+            [style.min-height.px]="minHeight"
+            [style.min-width]="col.getCellWidth()"
+            [style.max-width]="col.getCellWidth()"
+            [style.flex-basis]="col.getCellWidth()">
         </igx-grid-summary-cell>
     </ng-template>
 </ng-container>
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html
@@ -25,8 +25,9 @@
                 [lastPinned]="col.isLastPinned"
                 [style.min-height.px]="grid.rowHeight || 32"
                 [rowData]="rowData"
-                [style.min-width.px]="col.width"
-                [style.flex-basis.px]="col.width"
+                [style.min-width]="col.width"
+                [style.max-width]="col.width"
+                [style.flex-basis]="col.width"
                 [width]="col.getCellWidth()"
                 [visibleColumnIndex]="col.visibleIndex"
                 [value]="rowData[col.field]"
@@ -49,8 +50,9 @@
                 [lastPinned]="col.isLastPinned"
                 [style.min-height.px]="grid.rowHeight || 32"
                 [rowData]="rowData"
-                [style.min-width.px]="col.width"
-                [style.flex-basis.px]="col.width"
+                [style.min-width]="col.width"
+                [style.max-width]="col.width"
+                [style.flex-basis]="col.width"
                 [width]="col.getCellWidth()"
                 [visibleColumnIndex]="col.visibleIndex"
                 [value]="rowData[col.field]"
@@ -74,8 +76,9 @@
             [row]="this"
             [style.min-height.px]="grid.rowHeight || 32"
             [rowData]="rowData"
-            [style.min-width.px]="col.width"
-            [style.flex-basis.px]="col.width"
+            [style.min-width]="col.width"
+            [style.max-width]="col.width"
+            [style.flex-basis]="col.width"
             [width]="col.getCellWidth()"
             [visibleColumnIndex]="col.visibleIndex"
             [value]="rowData[col.field]"
@@ -97,8 +100,9 @@
             [row]="this"
             [style.min-height.px]="grid.rowHeight || 32"
             [rowData]="rowData"
-            [style.min-width.px]="col.width"
-            [style.flex-basis.px]="col.width"
+            [style.min-width]="col.width"
+            [style.max-width]="col.width"
+            [style.flex-basis]="col.width"
             [width]="col.getCellWidth()"
             [visibleColumnIndex]="col.visibleIndex"
             [value]="rowData[col.field]"
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html
@@ -34,16 +34,16 @@
             </ng-container>
             <ng-container *ngIf="pinnedColumns.length > 0">
                 <ng-template ngFor let-col [ngForOf]="pinnedColumns | igxTopLevel">
-                    <igx-grid-header-group [column]="col" [gridID]="id" [style.min-width.px]="getHeaderGroupWidth(col)"
-                        [style.flex-basis.px]="getHeaderGroupWidth(col)"></igx-grid-header-group>
+                    <igx-grid-header-group [column]="col" [gridID]="id" [style.min-width]="getHeaderGroupWidth(col)"
+                        [style.flex-basis]="getHeaderGroupWidth(col)"></igx-grid-header-group>
                 </ng-template>
             </ng-container>
             <ng-template igxGridFor let-col [igxGridForOf]="unpinnedColumns | igxTopLevel"
                 [igxForScrollOrientation]="'horizontal'" [igxForScrollContainer]="parentVirtDir"
                 [igxForContainerSize]='unpinnedWidth' [igxForTrackBy]='trackColumnChanges'
                 [igxForSizePropName]="'calcPixelWidth'" #headerContainer>
-                <igx-grid-header-group [column]="col" [gridID]="id" [style.min-width.px]="getHeaderGroupWidth(col)"
-                    [style.flex-basis.px]="getHeaderGroupWidth(col)"></igx-grid-header-group>
+                <igx-grid-header-group [column]="col" [gridID]="id" [style.min-width]="getHeaderGroupWidth(col)"
+                    [style.flex-basis]="getHeaderGroupWidth(col)"></igx-grid-header-group>
             </ng-template>
         </div>
         <igx-grid-filtering-row #filteringRow *ngIf="filteringService.isFilterRowVisible"
diff --git a/src/app/grid-column-pinning/grid-column-pinning.sample.ts b/src/app/grid-column-pinning/grid-column-pinning.sample.ts
@@ -18,16 +18,16 @@ export class GridColumnPinningSampleComponent implements OnInit {
 
     ngOnInit(): void {
         this.columns = [
-            { field: 'ID', width: 100, hidden: true },
-            { field: 'CompanyName', width: 300 },
-            { field: 'ContactName', width: 200, pinned: true },
-            { field: 'ContactTitle', width: 200, pinned: true },
-            { field: 'Address', width: 300 },
-            { field: 'City', width: 100 },
-            { field: 'Region', width: 100 },
-            { field: 'PostalCode', width: 100 },
-            { field: 'Phone', width: 150 },
-            { field: 'Fax', width: 150 }
+            { field: 'ID', width: '5%', hidden: false },
+            { field: 'CompanyName', width: '5%' },
+            { field: 'ContactName', width: '5%', pinned: false },
+            { field: 'ContactTitle', width: '25%', pinned: false },
+            { field: 'Address', width: '10%' },
+            { field: 'City', width: '10%' },
+            { field: 'Region', width: '10%' },
+            { field: 'PostalCode', width: '10%' },
+            { field: 'Phone', width: '10%' },
+            { field: 'Fax', width: '10%' }
         ];
 
         this.data = [
diff --git a/src/app/grid-column-resizing/grid-column-resizing.sample.ts b/src/app/grid-column-resizing/grid-column-resizing.sample.ts
@@ -18,7 +18,7 @@ export class GridColumnResizingSampleComponent implements OnInit {
     ngOnInit(): void {
         this.columns = [
             { field: 'ID', width: 100, resizable: true, maxWidth: 200, minWidth: 70 },
-            { field: 'CompanyName', width: 300, resizable: true },
+            { field: 'CompanyName', width: '300px', resizable: true },
             { field: 'ContactName', width: 200, resizable: true },
             { field: 'ContactTitle', width: 200, resizable: true },
             { field: 'Address', width: 300, resizable: true },

Original file line number	Diff line number	Diff line change
`@@ -313,7 +313,7 @@ export class IgxColumnComponent implements AfterContentInit {`
`313`	`313`	`this._calcWidth = null;`
`314`	`314`	`this.calcPixelWidth = NaN;`
`315`	`315`	`this.widthSetByUser = true;`
`316`		`- this._width = value;`
	`316`	`+ this._width = typeof(value) === 'number' ? value + 'px' : value;`
`317`	`317`	`if (this.grid) {`
`318`	`318`	`this.cacheCalcWidth();`
`319`	`319`	`}`
Original file line number	Diff line number	Diff line change
`@@ -4278,7 +4278,7 @@ export class IgxGridBaseComponent extends DisplayDensityBase implements`
`4278`	`4278`	`const columnWidthCombined = parseInt(this._columnWidth, 10) * (column.colEnd ? column.colEnd - column.colStart : 1);`
`4279`	`4279`	`column.defaultWidth = columnWidthCombined + 'px';`
`4280`	`4280`	`} else {`
`4281`		`- column.defaultWidth = this._columnWidth;`
	`4281`	`+ column.defaultWidth = this._columnWidth + 'px';`
`4282`	`4282`	`column.resetCaches();`
`4283`	`4283`	`}`
`4284`	`4284`	`});`
Original file line number	Diff line number	Diff line change
`@@ -105,8 +105,6 @@ export class IgxGridHeaderGroupComponent implements DoCheck {`
`105`	`105`	`* Gets the width of the header group.`
`106`	`106`	`* @memberof IgxGridHeaderGroupComponent`
`107`	`107`	`*/`
`108`		`- @HostBinding('style.min-width')`
`109`		`- @HostBinding('style.flex-basis')`
`110`	`108`	`get width() {`
`111`	`109`	`return this.grid.getHeaderGroupWidth(this.column);`
`112`	`110`	`}`
Original file line number	Diff line number	Diff line change
`@@ -128,9 +128,6 @@ export class IgxSummaryCellComponent {`
`128`	`128`	`}`
`129`	`129`	`}`
`130`	`130`
`131`		`- @HostBinding('style.min-width')`
`132`		`- @HostBinding('style.max-width')`
`133`		`- @HostBinding('style.flex-basis')`
`134`	`131`	`get width() {`
`135`	`132`	`return this.column.getCellWidth();`
`136`	`133`	`}`