diff --git a/src/app/grid/grid-overview/grid-overview.component.html b/src/app/grid/grid-overview/grid-overview.component.html new file mode 100644 index 000000000..bfd4e7a57 --- /dev/null +++ b/src/app/grid/grid-overview/grid-overview.component.html @@ -0,0 +1,24 @@ +
+
+ + + + + + + + + + + + + + +
+
diff --git a/src/app/grid/grid-overview/grid-overview.component.scss b/src/app/grid/grid-overview/grid-overview.component.scss new file mode 100644 index 000000000..be6ef44ad --- /dev/null +++ b/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; +} diff --git a/src/app/grid/grid-overview/grid-overview.component.ts b/src/app/grid/grid-overview/grid-overview.component.ts new file mode 100644 index 000000000..6a76d3c43 --- /dev/null +++ b/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'; + } +} diff --git a/src/app/grid/grid-routes-data.ts b/src/app/grid/grid-routes-data.ts index 57923487f..b191414a5 100644 --- a/src/app/grid/grid-routes-data.ts +++ b/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' }, diff --git a/src/app/grid/grids.routes.ts b/src/app/grid/grids.routes.ts index be9950dbc..68be3021a 100644 --- a/src/app/grid/grids.routes.ts +++ b/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'], diff --git a/src/app/lists/list/list-overview/list-overview.component.html b/src/app/lists/list/list-overview/list-overview.component.html new file mode 100644 index 000000000..c47dfda1d --- /dev/null +++ b/src/app/lists/list/list-overview/list-overview.component.html @@ -0,0 +1,20 @@ +
+ + Small + Medium + Large + + + + Contacts + @for (contact of contacts; track contact.name) { + + + {{ contact.name }} + {{ contact.phone }} + + + + } + +
diff --git a/src/app/lists/list/list-overview/list-overview.component.scss b/src/app/lists/list/list-overview/list-overview.component.scss new file mode 100644 index 000000000..ef5a46b5d --- /dev/null +++ b/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; + } +} diff --git a/src/app/lists/list/list-overview/list-overview.component.ts b/src/app/lists/list/list-overview/list-overview.component.ts new file mode 100644 index 000000000..e718100b6 --- /dev/null +++ b/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' } + ]; +} diff --git a/src/app/lists/lists-routes-data.ts b/src/app/lists/lists-routes-data.ts index e2d25c0a2..1d43b15c5 100644 --- a/src/app/lists/lists-routes-data.ts +++ b/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' }, diff --git a/src/app/lists/lists.routes.ts b/src/app/lists/lists.routes.ts index 3036dba6b..7f16e276c 100644 --- a/src/app/lists/lists.routes.ts +++ b/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