fix(igxGrid): Include chip in template for mdv expander cell.

Author: MKirova

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

@@ -1,3 +1,6 @@
+<ng-template #defaultPinnedIndicator>
+    <igx-chip *ngIf="displayPinnedChip" class="igx-grid__td--pinned-chip" [disabled]="true" [displayDensity]="'compact'">{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>
+</ng-template>
 <ng-template #defaultCell>
     <div igxTextHighlight style="pointer-events: none" [cssClass]="highlightClass" [activeCssClass]="activeHighlightClass" [groupName]="gridID"
         [value]="formatter ? formatter(value) : column.dataType === 'number' ? (value | igxdecimal: grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value"
@@ -33,6 +36,8 @@
         </ng-container>
     </div>
 </ng-container>
+<ng-container *ngTemplateOutlet="pinnedIndicatorTemplate; context: context">
+</ng-container>
 <ng-container *ngTemplateOutlet="template; context: context">
 </ng-container>
 <ng-template #defaultExpandedTemplate>

projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts

@@ -456,6 +456,9 @@ describe('Row Pinning #grid', () => {
             expect(grid.expansionStates.get(pinnedRow.rowID)).toBeTruthy();
             // disabled row should have expand icon
             expect(firstRowIconName).toEqual('expand_more');
+            // disabled row should have chip
+            const cell = grid.getRowByIndex(0).cells.first;
+            expect(cell.nativeElement.getElementsByClassName('igx-grid__td--pinned-chip').length).toBe(1);
             // pinned row shouldn't have expand icon
             const hasIconForPinnedRow = pinnedRow.cells.first.nativeElement.querySelector('igx-icon');
             expect(hasIconForPinnedRow).toBeNull();

src/app/grid-row-pinning/grid-row-pinning.sample.html

@@ -32,7 +32,7 @@
                 <ng-template igxToolbarCustomContent>
                     <app-grid-search-box [grid]="grid1" [style.width]="'400px'"></app-grid-search-box>
                 </ng-template>
-                <igx-column width='120px' [filterable]='false'>
+                <igx-column width='150px' [filterable]='false'>
                     <ng-template igxCell let-cell="cell" let-val>
                         <igx-icon class="pin-icon" (mousedown)="togglePining(cell.row, $event)"
                         fontSet="filtering-icons" name="{{cell.row.pinned ? 'unpin' : 'pin'}}">