feat(grid): update grid samples

src/app/grid/grid-overview/grid-overview.component.html

@@ -0,0 +1,24 @@
+<div class="container sample ig-typography">
+  <div class="container fill">
+    <igx-grid
+      id="grid"
+      [data]="data"
+      [autoGenerate]="false"
+      [primaryKey]="'ProductID'"
+      [allowFiltering]="true"
+      filterMode="excelStyleFilter">
+      <igx-paginator [perPage]="10"></igx-paginator>
+
+      <igx-column field="ProductName" header="Product Name" [headerClasses]="'grid-header-title'" dataType="string" [sortable]="true" [hasSummary]="true" [editable]="true" [resizable]="true"></igx-column>
+      <igx-column field="UnitPrice" header="Unit Price" [headerClasses]="'grid-header-title'" dataType="number" [sortable]="true" [hasSummary]="true" [editable]="true" [resizable]="true"></igx-column>
+      <igx-column field="UnitsInStock" header="Units in Stock" [headerClasses]="'grid-header-title'" dataType="number" [sortable]="true" [hasSummary]="true" [editable]="true" [resizable]="true"></igx-column>
+      <igx-column field="OrderDate" header="Order Date" [headerClasses]="'grid-header-title'" dataType="date" [sortable]="true" [hasSummary]="true" [editable]="true" [resizable]="true"></igx-column>
+      <igx-column field="Discontinued" header="Discontinued" [headerClasses]="'grid-header-title'" dataType="boolean" width="150px" [sortable]="true" [hasSummary]="true" [editable]="true">
+        <ng-template igxCell let-cell="cell">
+          <img class="status-icon" [src]="booleanCellTemplate(cell.value)" [alt]="cell.value ? 'Continued' : 'Discontinued'" [title]="cell.value ? 'Continued' : 'Discontinued'">
+        </ng-template>
+      </igx-column>
+      <igx-column field="ReorderLevel" header="Reorder Level" [headerClasses]="'grid-header-title'" dataType="number" width="140px" [sortable]="true" [hasSummary]="true" [editable]="true" [filterable]="true"></igx-column>
+    </igx-grid>
+  </div>
+</div>

src/app/grid/grid-overview/grid-overview.component.scss

@@ -0,0 +1,44 @@
+:host {
+    display: block;
+    height: 100%;
+    width: 100%;
+    min-height: 600px;
+    min-width: 0;
+}
+
+.container.sample {
+    height: 100%;
+    width: 100% !important;
+    max-width: none !important;
+    margin: 0 !important;
+    padding: 0 !important;
+}
+
+.container.fill {
+    height: 100%;
+    width: 100% !important;
+    max-width: none !important;
+    margin: 0 !important;
+    padding: 0 !important;
+}
+
+igx-grid {
+    --ig-size: var(--ig-size-medium);
+    display: block;
+    width: 100%;
+    height: 100%;
+    min-height: 600px;
+}
+
+::ng-deep igx-grid igx-grid-header.grid-header-title .igx-grid-th__title,
+::ng-deep igx-grid igx-grid-header.grid-header-title .igx-grid-th__group-title {
+    font-family: inherit;
+    font-weight: 600;
+}
+
+.status-icon {
+    width: 24px;
+    height: 24px;
+    display: block;
+    margin: 0 auto;
+}

src/app/grid/grid-overview/grid-overview.component.ts

@@ -0,0 +1,20 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core';
+import { IgxGridComponent } from 'igniteui-angular/grids/grid';
+import { IgxPaginatorComponent } from 'igniteui-angular/paginator';
+import { DATA } from '../../data/nwindData';
+
+@Component({
+    selector: 'app-grid-overview',
+    templateUrl: './grid-overview.component.html',
+    styleUrls: ['./grid-overview.component.scss'],
+    changeDetection: ChangeDetectionStrategy.Eager,
+    imports: [IgxCellHeaderTemplateDirective, IgxCellTemplateDirective, IgxColumnComponent, IgxGridComponent, IgxPaginatorComponent]
+})
+export class GridOverviewComponent {
+    public data = DATA;
+
+    public booleanCellTemplate(value: boolean): string {
+        return value ? 'assets/images/grid/active.png' : 'assets/images/grid/expired.png';
+    }
+}

src/app/grid/grid-routes-data.ts

@@ -1,6 +1,7 @@
 // tslint:disable:object-literal-sort-keys
 
 export const gridsRoutesData = {
+    'grid-overview': { displayName: 'Grid Overview', parentName: 'Grid' },
     'grid-groupby': { displayName: 'Grid GroupBy', parentName: 'Grid' },
     'grid-cellMerge': { displayName: 'Grid Cell Merge', parentName: 'Grid' },
     'grid-cellMerge-custom': { displayName: 'Grid Cell Merge Custom', parentName: 'Grid' },

src/app/grid/grids.routes.ts

@@ -98,6 +98,7 @@ import {
     GridConditionalRowSelectorsComponent
 } from './grid-conditional-row-selectors/grid-conditional-row-selectors-sample.component';
 import { GridEditingEventsComponent } from './grid-editing-events/grid-editing-events.component';
+import { GridOverviewComponent } from './grid-overview/grid-overview.component';
 import { GridEditingLifecycleComponent } from './grid-editing-lifecycle-sample/grid-editing-lifecycle.component';
 import { GridEditingStyleSampleComponent } from './grid-editing-style-sample/grid-editing-style-sample.component';
 import { GridKeyboardnavGuide } from './grid-keyboardnav-guide-sample/grid-keyboardnav-sample.component';
@@ -138,6 +139,11 @@ import { GridCellMergeCustomSampleComponent } from './grid-cell-merge-custom-sam
 // tslint:enable:max-line-length
 
 export const GridsRoutes: Routes = [
+    {
+        component: GridOverviewComponent,
+        data: gridsRoutesData['grid-overview'],
+        path: 'grid-overview'
+    },
     {
         component: GridSample3Component,
         data: gridsRoutesData['grid-summary'],

src/app/lists/list/list-overview/list-overview.component.html

@@ -0,0 +1,20 @@
+<div class="container sample">
+  <igx-radio-group alignment="horizontal" class="size-selector">
+    <igx-radio name="size" value="small" [(ngModel)]="listSize">Small</igx-radio>
+    <igx-radio name="size" value="medium" [(ngModel)]="listSize">Medium</igx-radio>
+    <igx-radio name="size" value="large" [(ngModel)]="listSize">Large</igx-radio>
+  </igx-radio-group>
+
+  <igx-list [class]="'size-' + listSize">
+    <igx-list-item [isHeader]="true">Contacts</igx-list-item>
+    @for (contact of contacts; track contact.name) {
+      <igx-list-item>
+        <igx-avatar igxListThumbnail [src]="contact.avatar" shape="circle"></igx-avatar>
+        <span igxListLineTitle>{{ contact.name }}</span>
+        <span igxListLineSubTitle>{{ contact.phone }}</span>
+        <button igxButton="outlined" igxListAction>Text</button>
+        <button igxButton="outlined" igxListAction>Call</button>
+      </igx-list-item>
+    }
+  </igx-list>
+</div>

src/app/lists/list/list-overview/list-overview.component.scss

@@ -0,0 +1,32 @@
+@use '../../../../variables' as *;
+
+:host {
+    display: block;
+    padding: 16px;
+}
+
+.size-selector {
+    margin-bottom: 12px;
+}
+
+.size-small {
+    --ig-size: var(--ig-size-small);
+}
+
+.size-medium {
+    --ig-size: var(--ig-size-medium);
+}
+
+.size-large {
+    --ig-size: var(--ig-size-large);
+}
+
+igx-list {
+    width: 100%;
+}
+
+@media (max-width: 600px) {
+    :host {
+        padding: 12px;
+    }
+}

src/app/lists/list/list-overview/list-overview.component.ts

@@ -0,0 +1,35 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { IgxAvatarComponent } from 'igniteui-angular/avatar';
+import { IgxButtonDirective } from 'igniteui-angular/directives';
+import { IgxListActionDirective, IgxListComponent, IgxListItemComponent, IgxListLineSubTitleDirective, IgxListLineTitleDirective, IgxListThumbnailDirective } from 'igniteui-angular/list';
+import { IgxRadioComponent, IgxRadioGroupDirective } from 'igniteui-angular/radio';
+
+@Component({
+    selector: 'app-list-overview',
+    templateUrl: './list-overview.component.html',
+    styleUrls: ['./list-overview.component.scss'],
+    changeDetection: ChangeDetectionStrategy.Eager,
+    imports: [
+        FormsModule,
+        IgxAvatarComponent,
+        IgxButtonDirective,
+        IgxListActionDirective,
+        IgxListComponent,
+        IgxListItemComponent,
+        IgxListLineSubTitleDirective,
+        IgxListLineTitleDirective,
+        IgxListThumbnailDirective,
+        IgxRadioComponent,
+        IgxRadioGroupDirective
+    ]
+})
+export class ListOverviewComponent {
+    public listSize = 'medium';
+
+    public contacts = [
+        { name: 'Terrance Orta', phone: '770-504-2217', avatar: 'assets/images/avatar/8.jpg' },
+        { name: 'Richard Mahoney', phone: '423-676-2869', avatar: 'assets/images/avatar/17.jpg' },
+        { name: 'Donna Price', phone: '859-496-2817', avatar: 'assets/images/avatar/9.jpg' }
+    ];
+}

src/app/lists/lists-routes-data.ts

@@ -16,6 +16,7 @@ export const listsRoutesData = {
     'simple-combo-styling': { displayName: 'Simple Combo Styling', parentName: 'Combo'},
     'simple-combo-remote': { displayName: 'Remote Simple Combo', parentName: 'Combo'},
     // eslint-disable-next-line quote-props
+    'list-overview': { displayName: 'List Overview', parentName: 'List' },
     'list': { displayName: 'List Overview', parentName: 'List' },
     'list-sample-2': { displayName: 'List Item Header', parentName: 'List' },
     'list-sample-3': { displayName: 'List Item Template', parentName: 'List' },

src/app/lists/lists.routes.ts

@@ -30,6 +30,7 @@ import { SimpleComboCascadingComponent } from './combo/simple-combo-cascading/si
 import { SimpleComboStylingComponent } from './combo/simple-combo-styling/simple-combo-styling.component';
 import { ListItemSelectionComponent } from './list/list-item-selection/list-item-selection.component';
 import { SimpleComboRemoteComponent } from './combo/simple-combo-remote/simple-combo-remote.component';
+import { ListOverviewComponent } from './list/list-overview/list-overview.component';
 
 export const ListsRoutes: Routes = [
     {
@@ -102,6 +103,11 @@ export const ListsRoutes: Routes = [
         data: listsRoutesData['simple-combo-remote'],
         path: 'simple-combo-remote'
     },
+    {
+        component: ListOverviewComponent,
+        data: listsRoutesData['list-overview'],
+        path: 'list-overview'
+    },
     {
         component: ListComponent,
         // tslint:disable-next-line:no-string-literal