Skip to content

Commit 54bbcd1

Browse files
simeonoffsimeonoff
authored
Merge branch 'master' into apetrov/add-roundness-sample
2 parents e59dbda + ed5b914 commit 54bbcd1

File tree

9 files changed

+142
-44
lines changed

9 files changed

+142
-44
lines changed

‎src/app/grid/grid-multi-row-layout-configuration/grid-multi-row-layout-configuration.component.html‎

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="sample-wrapper">
1+
<div class="sample-wrapper mrl-layout">
22
<section style="height: 800px;">
33
<div style="display: flex; justify-content: center; flex-wrap: wrap; margin-top: 15px; margin-bottom: 15px;">
44
<div class="settingsInputWrapper">
@@ -13,12 +13,15 @@
1313
[id]="block.key" [data]="block" [selected]="block.key === selectedBlock.key" [draggable]="true"
1414
(chipClick)="selectedBlock = block" (pointerenter)="onPointerOver(chip)" (pointerleave)="onPointerLeave(chip)">
1515
{{block.key}}
16-
<div class="material-icons igx-icon"
17-
[style.opacity]="chip.data.hovered ? '1' : '0'" [style.z-index]="chip.data.hovered ? '1' : '-1'" [style.width]="chip.data.hovered ? '24px' : '0px'"
18-
style="transition: opacity 150ms cubic-bezier(0.455, 0.03, 0.515, 0.955); transition: width 100ms cubic-bezier(0.455, 0.03, 0.515, 0.955);"
19-
igxSuffix igxIconButton="flat" (pointerdown)="onRemovePointerDown($event)" (mousedown)="onRemovePointerDown($event)" (click)="onRemoveClickBlock(blockIndex)">
20-
<igx-icon id="igx-icon-150" >cancel</igx-icon>
21-
</div>
16+
17+
<igx-icon
18+
[style.opacity]="chip.data.hovered ? '1' : '0'" [style.z-index]="chip.data.hovered ? '1' : '-1'" [style.width]="chip.data.hovered ? '24px' : '0px'"
19+
style="transition: opacity 150ms cubic-bezier(0.455, 0.03, 0.515, 0.955); transition: width 100ms cubic-bezier(0.455, 0.03, 0.515, 0.955);"
20+
(pointerdown)="onRemovePointerDown($event)" (mousedown)="onRemovePointerDown($event)" (click)="onRemoveClickBlock(blockIndex)"
21+
igxSuffix
22+
id="igx-icon-150">
23+
cancel
24+
</igx-icon>
2225
</igx-chip>
2326
}
2427
<igx-chip #addBlock [style.margin]="'5px'" [data]="{ clicked: false }" (chipClick)="onAddBlockClick(addBlock)">
@@ -28,7 +31,7 @@
2831
}
2932
@if (addBlock.data.clicked) {
3033
<igx-input-group>
31-
<input style="width: 15ch; padding: unset; border: none; height: 25px;" igxInput type="text" placeholder="Layout Name" (keydown)="inputKeyDownBlock($event, addBlock)" (blur)="inputBlur($event, addBlock)"/>
34+
<input igxInput type="text" placeholder="Layout Name" (keydown)="inputKeyDownBlock($event, addBlock)" (blur)="inputBlur($event, addBlock)"/>
3235
</igx-input-group>
3336
}
3437
</igx-chip>
@@ -104,27 +107,28 @@
104107

105108
<div style="width: 100%; margin-bottom: 15px; text-align:center; min-height: 50px;" >
106109
<span>Drag a column into a layout cell to apply:</span>
107-
<igx-chips-area style="margin: auto; justify-content: center;">
110+
<igx-chips-area style="margin: auto; justify-content: center; gap: 10px;">
108111
@for (col of columnsList; track col; let colIndex = $index) {
109-
<igx-chip #chip [style.margin]="'5px'" [data]="col" [draggable]="true"
112+
<igx-chip #chip [data]="col" [draggable]="true"
110113
(pointerenter)="onPointerOver(chip)" (pointerleave)="onPointerLeave(chip)">
111114
{{col.key}}
112-
<div class="material-icons igx-icon"
115+
<igx-icon
113116
[style.opacity]="chip.data.hovered ? '1' : '0'" [style.z-index]="chip.data.hovered ? '1' : '-1'" [style.width]="chip.data.hovered ? '24px' : '0px'"
114117
style="transition: opacity 150ms cubic-bezier(0.455, 0.03, 0.515, 0.955); transition: width 100ms cubic-bezier(0.455, 0.03, 0.515, 0.955);"
115-
igxSuffix igxIconButton="flat" (pointerdown)="onRemovePointerDown($event)" (mousedown)="onRemovePointerDown($event)" (click)="onRemoveClickColumn(colIndex)">
116-
<igx-icon id="igx-icon-150" >cancel</igx-icon>
117-
</div>
118+
igxSuffix (pointerdown)="onRemovePointerDown($event)" (mousedown)="onRemovePointerDown($event)" (click)="onRemoveClickColumn(colIndex)"
119+
id="igx-icon-150">
120+
cancel
121+
</igx-icon>
118122
</igx-chip>
119123
}
120-
<igx-chip #addChip [style.margin]="'5px'" [data]="{ clicked: false }" (chipClick)="onAddChipClick(addChip)">
124+
<igx-chip #addChip [data]="{ clicked: false }" (chipClick)="onAddChipClick(addChip)">
121125
<igx-icon igxPrefix>add_circle_outline</igx-icon>
122126
@if (!addChip.data.clicked) {
123127
<span>{{"Add Column"}}</span>
124128
}
125129
@if (addChip.data.clicked) {
126130
<igx-input-group>
127-
<input style="width: 10ch; padding: unset; border: none; height: 25px;" igxInput type="text" placeholder="Column Key" (keydown)="inputKeyDown($event, addChip)" (blur)="inputBlur($event, addChip)"/>
131+
<input igxInput type="text" placeholder="Column Key" (keydown)="inputKeyDown($event, addChip)" (blur)="inputBlur($event, addChip)"/>
128132
</igx-input-group>
129133
}
130134
</igx-chip>

‎src/app/grid/grid-multi-row-layout-configuration/grid-multi-row-layout-configuration.component.scss‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,27 @@
1+
.mrl-layout {
2+
igx-input-group {
3+
--ig-size: 1;
4+
--size: 22px;
5+
--idle-bottom-line-color: transparent;
6+
--hover-bottom-line-color: transparent;
7+
--focused-bottom-line-color: transparent;
8+
--focused-secondary-color: transparent;
9+
10+
.igx-input-group__bundle-start,
11+
.igx-input-group__bundle-end {
12+
display: none;
13+
}
14+
15+
.igx-input-group__bundle {
16+
top: 0;
17+
}
18+
}
19+
20+
igx-chip {
21+
--ig-size: var(--ig-size-medium);
22+
}
23+
}
24+
125
.igx-grid__thead-wrapper {
226
position: initial !important;
327
}
@@ -206,7 +230,7 @@
206230
width: 800px;
207231
}
208232

209-
.bottomButton {
233+
.bottomButton {
210234
margin: 5px;
211235
}
212236

‎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)