Skip to content

Commit b9e0732

Browse files
simeonoffsimeonoff
authored
Merge branch 'master' into mpopov/fix-sample/close-#3679
2 parents 5e27c74 + 8f0b9ff commit b9e0732

File tree

7 files changed

+97
-27
lines changed

7 files changed

+97
-27
lines changed

‎src/app/grid/grid-sample-pinning-styling/grid-pinning-styling.component.ts‎

Lines changed: 50 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,62 @@
1-
import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core';
2-
import { IgxColumnComponent, IgxGridComponent, IgxCellHeaderTemplateDirective, IgxIconComponent } from 'igniteui-angular';
3-
import { DATA } from '../../data/customers';
4-
import { IgxPreventDocumentScrollDirective } from '../../directives/prevent-scroll.directive';
5-
1+
import { Component, ViewChild, OnInit, inject } from "@angular/core";
2+
import {
3+
IgxColumnComponent,
4+
IgxGridComponent,
5+
IgxCellHeaderTemplateDirective,
6+
IgxIconComponent,
7+
IgxIconService
8+
} from "igniteui-angular";
9+
import { DATA } from "../../data/customers";
10+
import { IgxPreventDocumentScrollDirective } from "../../directives/prevent-scroll.directive";
611

712
@Component({
8-
selector: 'app-grid-sample',
9-
styleUrls: ['grid-pinning-styling.component.scss'],
10-
templateUrl: 'grid-pinning-styling.component.html',
11-
imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellHeaderTemplateDirective, IgxIconComponent]
13+
selector: "app-grid-sample",
14+
styleUrls: ["grid-pinning-styling.component.scss"],
15+
templateUrl: "grid-pinning-styling.component.html",
16+
imports: [
17+
IgxGridComponent,
18+
IgxPreventDocumentScrollDirective,
19+
IgxColumnComponent,
20+
IgxCellHeaderTemplateDirective,
21+
IgxIconComponent
22+
]
1223
})
24+
export class PinningStylingComponent implements OnInit {
25+
private iconService = inject(IgxIconService);
26+
@ViewChild("grid1", { static: true }) public grid1: IgxGridComponent;
1327

14-
export class PinningStylingComponent implements OnInit{
15-
@ViewChild('grid1', { static: true }) public grid1: IgxGridComponent;
28+
constructor() {
29+
this.iconService.setFamily("fas", {
30+
className: "fas",
31+
type: "font",
32+
prefix: "fa-"
33+
});
34+
}
1635

1736
public data: any[];
1837
public columns: any[];
1938
public ngOnInit(): void {
2039
this.columns = [
21-
{ field: 'ID', header: 'ID', width: 100, hidden: true },
22-
{ field: 'CompanyName', header: 'Company Name', width: 300 },
23-
{ field: 'ContactName', header: 'Contact Name', width: 200, pinned: true },
24-
{ field: 'ContactTitle', header: 'Contact Title', width: 200, pinned: true },
25-
{ field: 'Address', header: 'Address', width: 300 },
26-
{ field: 'City', header: 'City', width: 120 },
27-
{ field: 'Region', header: 'Region', width: 120 },
28-
{ field: 'PostalCode', header: 'Postal Code', width: 150 },
29-
{ field: 'Phone', header: 'Phone', width: 150 },
30-
{ field: 'Fax', header: 'Fax', width: 150 }
40+
{ field: "ID", header: "ID", width: 100, hidden: true },
41+
{ field: "CompanyName", header: "Company Name", width: 300 },
42+
{
43+
field: "ContactName",
44+
header: "Contact Name",
45+
width: 200,
46+
pinned: true
47+
},
48+
{
49+
field: "ContactTitle",
50+
header: "Contact Title",
51+
width: 200,
52+
pinned: true
53+
},
54+
{ field: "Address", header: "Address", width: 300 },
55+
{ field: "City", header: "City", width: 120 },
56+
{ field: "Region", header: "Region", width: 120 },
57+
{ field: "PostalCode", header: "Postal Code", width: 150 },
58+
{ field: "Phone", header: "Phone", width: 150 },
59+
{ field: "Fax", header: "Fax", width: 150 }
3160
];
3261
this.data = DATA;
3362
}

‎src/app/scheduling/daterangepicker/daterangepicker-start-end/daterangepicker-start-end.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,17 @@
44
<igx-picker-toggle igxPrefix>
55
<igx-icon>calendar_today</igx-icon>
66
</igx-picker-toggle>
7+
<igx-picker-clear igxSuffix>
8+
<igx-icon>clear</igx-icon>
9+
</igx-picker-clear>
710
</igx-date-range-start>
811
<igx-date-range-end>
12+
<igx-picker-toggle igxPrefix>
13+
<igx-icon>calendar_today</igx-icon>
14+
</igx-picker-toggle>
915
<input igxInput igxDateTimeEditor type="text">
16+
<igx-picker-clear igxSuffix>
17+
<igx-icon>clear</igx-icon>
18+
</igx-picker-clear>
1019
</igx-date-range-end>
1120
</igx-date-range-picker>

‎src/app/scheduling/daterangepicker/daterangepicker-start-end/daterangepicker-start-end.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import { Component } from '@angular/core';
2-
import { DateRange, IgxDateRangePickerComponent, IgxDateRangeStartComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxDateRangeEndComponent } from 'igniteui-angular';
2+
import { DateRange, IgxDateRangePickerComponent, IgxDateRangeStartComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxDateRangeEndComponent, IgxPickerClearComponent, IgxSuffixDirective } from 'igniteui-angular';
33
import { FormsModule } from '@angular/forms';
44

55
@Component({
66
selector: 'app-rangedatepicker-start-end',
77
styleUrls: ['./daterangepicker-start-end.scss'],
88
templateUrl: './daterangepicker-start-end.html',
9-
imports: [IgxDateRangePickerComponent, FormsModule, IgxDateRangeStartComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxDateRangeEndComponent]
9+
imports: [IgxDateRangePickerComponent, FormsModule, IgxDateRangeStartComponent, IgxInputDirective, IgxDateTimeEditorDirective,
10+
IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxDateRangeEndComponent, IgxSuffixDirective,
11+
IgxPickerClearComponent]
1012
})
1113
export class DateRangePickerStartEndComponent {
1214
public range: DateRange = { start: new Date(), end: new Date(new Date().setDate(new Date().getDate() + 5)) };

‎src/app/scheduling/daterangepicker/daterangepicker-styling/daterangepicker-styling.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,17 @@
44
<igx-picker-toggle igxPrefix>
55
<igx-icon>calendar_today</igx-icon>
66
</igx-picker-toggle>
7+
<igx-picker-clear igxSuffix>
8+
<igx-icon>clear</igx-icon>
9+
</igx-picker-clear>
710
</igx-date-range-start>
811
<igx-date-range-end>
12+
<igx-picker-toggle igxPrefix>
13+
<igx-icon>calendar_today</igx-icon>
14+
</igx-picker-toggle>
915
<input igxInput igxDateTimeEditor type="text">
16+
<igx-picker-clear igxSuffix>
17+
<igx-icon>clear</igx-icon>
18+
</igx-picker-clear>
1019
</igx-date-range-end>
1120
</igx-date-range-picker>

‎src/app/scheduling/daterangepicker/daterangepicker-styling/daterangepicker-styling.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import { Component, ElementRef, inject } from '@angular/core';
2-
import { DateRange, IgxDateRangePickerComponent, IgxDateRangeStartComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxDateRangeEndComponent } from 'igniteui-angular';
2+
import { DateRange, IgxDateRangePickerComponent, IgxDateRangeStartComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxDateRangeEndComponent, IgxSuffixDirective, IgxPickerClearComponent } from 'igniteui-angular';
33
import { FormsModule } from '@angular/forms';
44

55
@Component({
66
selector: 'app-styled-rangedatepicker',
77
styleUrls: ['./daterangepicker-styling.scss'],
88
templateUrl: './daterangepicker-styling.html',
9-
imports: [IgxDateRangePickerComponent, FormsModule, IgxDateRangeStartComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxDateRangeEndComponent]
9+
imports: [IgxDateRangePickerComponent, FormsModule, IgxDateRangeStartComponent, IgxInputDirective, IgxDateTimeEditorDirective,
10+
IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxDateRangeEndComponent, IgxSuffixDirective, IgxPickerClearComponent]
1011
})
1112
export class StyledDateRangePickerComponent {
1213
element = inject(ElementRef);

‎src/app/scheduling/daterangepicker/daterangepicker-validation/daterangepicker-validation.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,19 @@
1010
</igx-picker-toggle>
1111
<label igxLabel>Start Date</label>
1212
<input igxInput igxDateTimeEditor type="text">
13+
<igx-picker-clear igxSuffix>
14+
<igx-icon>clear</igx-icon>
15+
</igx-picker-clear>
1316
</igx-date-range-start>
1417
<igx-date-range-end>
18+
<igx-picker-toggle igxPrefix>
19+
<igx-icon>calendar_today</igx-icon>
20+
</igx-picker-toggle>
1521
<label igxLabel>End Date</label>
1622
<input igxInput igxDateTimeEditor type="text">
23+
<igx-picker-clear igxSuffix>
24+
<igx-icon>clear</igx-icon>
25+
</igx-picker-clear>
1726
</igx-date-range-end>
1827
</igx-date-range-picker>
1928

@@ -24,9 +33,18 @@
2433
</igx-picker-toggle>
2534
<label igxLabel>Start Date</label>
2635
<input igxInput igxDateTimeEditor [(ngModel)]="startDate" type="text" required>
36+
<igx-picker-clear igxSuffix>
37+
<igx-icon>clear</igx-icon>
38+
</igx-picker-clear>
2739
</igx-date-range-start>
2840
<igx-date-range-end>
41+
<igx-picker-toggle igxPrefix>
42+
<igx-icon>calendar_today</igx-icon>
43+
</igx-picker-toggle>
2944
<label igxLabel>End Date</label>
3045
<input igxInput igxDateTimeEditor [(ngModel)]="endDate" type="text" required>
46+
<igx-picker-clear igxSuffix>
47+
<igx-icon>clear</igx-icon>
48+
</igx-picker-clear>
3149
</igx-date-range-end>
3250
</igx-date-range-picker>

‎src/app/scheduling/daterangepicker/daterangepicker-validation/daterangepicker-validation.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import { Component } from '@angular/core';
2-
import { DateRange, IgxDateRangePickerComponent, IgxLabelDirective, IgxDateRangeStartComponent, IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxDateRangeEndComponent } from 'igniteui-angular';
2+
import { DateRange, IgxDateRangePickerComponent, IgxLabelDirective, IgxDateRangeStartComponent, IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxDateRangeEndComponent, IgxSuffixDirective, IgxPickerClearComponent } from 'igniteui-angular';
33
import { FormsModule } from '@angular/forms';
44

55
@Component({
66
selector: 'app-daterangepicker-validation',
77
styleUrls: ['./daterangepicker-validation.scss'],
88
templateUrl: './daterangepicker-validation.html',
9-
imports: [IgxDateRangePickerComponent, FormsModule, IgxLabelDirective, IgxDateRangeStartComponent, IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxDateRangeEndComponent]
9+
imports: [IgxDateRangePickerComponent, FormsModule, IgxLabelDirective, IgxDateRangeStartComponent, IgxPickerToggleComponent,
10+
IgxPrefixDirective, IgxIconComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxDateRangeEndComponent,
11+
IgxSuffixDirective, IgxPickerClearComponent]
1012
})
1113
export class DateRangePickerValidationComponent {
1214
public rangeSingle: DateRange;

0 commit comments

Comments
 (0)