Skip to content

Commit 310f456

Browse files
LipataLipata
committed
fix(igx-date-range-picker): remove sample wrappers #1574 
1 parent e4ddff8 commit 310f456

File tree

12 files changed

+105
-109
lines changed

12 files changed

+105
-109
lines changed

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

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<div class="date-range-picker-wrapper">
2-
<igx-date-range-picker [(ngModel)]="range">
3-
<label igxLabel>Flight dates</label>
4-
</igx-date-range-picker>
5-
</div>
1+
2+
<igx-date-range-picker [(ngModel)]="range">
3+
<label igxLabel>Flight dates</label>
4+
</igx-date-range-picker>
5+

‎src/app/scheduling/daterangepicker/daterangepicker-basic/daterangepicker-basic.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
.date-range-picker-wrapper {
1+
:host {
2+
display: block;
23
padding: 1rem;
34
max-width: 600px;
45
}

‎src/app/scheduling/daterangepicker/daterangepicker-flight-booking/daterangepicker-flight-booking.html

+33-33
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,34 @@
1-
<div class="date-range-picker-wrapper">
2-
<form>
3-
<div class="towns">
4-
<igx-select name="townFrom" [(ngModel)]="townFrom" class="town-select">
5-
<igx-prefix>
6-
<igx-icon>flight_takeoff</igx-icon>
7-
</igx-prefix>
8-
<igx-select-item *ngFor="let town of towns" [value]="town">
9-
{{town}}
10-
</igx-select-item>
11-
</igx-select>
12-
<igx-select name="townTo" [(ngModel)]="townTo" class="town-select">
13-
<igx-prefix>
14-
<igx-icon>flight_land</igx-icon>
15-
</igx-prefix>
16-
<igx-select-item *ngFor="let town of towns | withoutTownFrom:townFrom" [value]="town">
17-
{{town}}
18-
</igx-select-item>
19-
</igx-select>
20-
</div>
211

22-
<igx-date-range-picker name="datesRange" #dateRangePicker="ngModel" required
23-
[(ngModel)]="range"
24-
[minValue]="minDate"
25-
[maxValue]="maxDate"
26-
[placeholder]="'Depart on - Return on'"
27-
>
28-
<label igxLabel>Flight dates</label>
29-
<igx-hint *ngIf="dateRangePicker.invalid && (dateRangePicker.dirty || dateRangePicker.touched)">
30-
Please choose start and end date!
31-
</igx-hint>
32-
</igx-date-range-picker>
33-
</form>
34-
</div>
2+
<form>
3+
<div class="towns">
4+
<igx-select name="townFrom" [(ngModel)]="townFrom" class="town-select">
5+
<igx-prefix>
6+
<igx-icon>flight_takeoff</igx-icon>
7+
</igx-prefix>
8+
<igx-select-item *ngFor="let town of towns" [value]="town">
9+
{{town}}
10+
</igx-select-item>
11+
</igx-select>
12+
<igx-select name="townTo" [(ngModel)]="townTo" class="town-select">
13+
<igx-prefix>
14+
<igx-icon>flight_land</igx-icon>
15+
</igx-prefix>
16+
<igx-select-item *ngFor="let town of towns | withoutTownFrom:townFrom" [value]="town">
17+
{{town}}
18+
</igx-select-item>
19+
</igx-select>
20+
</div>
21+
22+
<igx-date-range-picker name="datesRange" #dateRangePicker="ngModel" required
23+
[(ngModel)]="range"
24+
[minValue]="minDate"
25+
[maxValue]="maxDate"
26+
[placeholder]="'Depart on - Return on'"
27+
>
28+
<label igxLabel>Flight dates</label>
29+
<igx-hint *ngIf="dateRangePicker.invalid && (dateRangePicker.dirty || dateRangePicker.touched)">
30+
Please choose start and end date!
31+
</igx-hint>
32+
</igx-date-range-picker>
33+
</form>
34+

‎src/app/scheduling/daterangepicker/daterangepicker-flight-booking/daterangepicker-flight-booking.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
.date-range-picker-wrapper {
1+
:host {
2+
display: block;
23
padding: 1rem;
34
max-width: 700px;
45
}

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

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1 @@
1-
<div class="date-range-picker-wrapper">
2-
<igx-date-range-picker value="range" [mode]="'dropdown'"></igx-date-range-picker>
3-
</div>
1+
<igx-date-range-picker value="range" [mode]="'dropdown'"></igx-date-range-picker>

‎src/app/scheduling/daterangepicker/daterangepicker-mode/daterangepicker-mode.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
.date-range-picker-wrapper {
1+
:host {
2+
display: block;
23
padding: 1rem;
34
max-width: 600px;
45
}

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

+11-13
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
1-
<div class="date-range-picker-wrapper">
2-
<igx-date-range-picker [(ngModel)]="range">
3-
<igx-date-range-start>
4-
<input igxInput igxDateTimeEditor type="text">
5-
<igx-picker-toggle igxPrefix>
6-
<igx-icon>calendar_today</igx-icon>
7-
</igx-picker-toggle>
8-
</igx-date-range-start>
9-
<igx-date-range-end>
10-
<input igxInput igxDateTimeEditor type="text">
11-
</igx-date-range-end>
12-
</igx-date-range-picker>
13-
</div>
1+
<igx-date-range-picker [(ngModel)]="range">
2+
<igx-date-range-start>
3+
<input igxInput igxDateTimeEditor type="text">
4+
<igx-picker-toggle igxPrefix>
5+
<igx-icon>calendar_today</igx-icon>
6+
</igx-picker-toggle>
7+
</igx-date-range-start>
8+
<igx-date-range-end>
9+
<input igxInput igxDateTimeEditor type="text">
10+
</igx-date-range-end>
11+
</igx-date-range-picker>

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1-
.date-range-picker-wrapper {
1+
:host {
2+
display: block;
23
padding: 1rem;
34
}

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

+11-13
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
1-
<div class="date-range-picker-wrapper">
2-
<igx-date-range-picker [(ngModel)]="range" [overlaySettings]="{ outlet: element }">
3-
<igx-date-range-start>
4-
<input igxInput igxDateTimeEditor type="text">
5-
<igx-picker-toggle igxPrefix>
6-
<igx-icon>calendar_today</igx-icon>
7-
</igx-picker-toggle>
8-
</igx-date-range-start>
9-
<igx-date-range-end>
10-
<input igxInput igxDateTimeEditor type="text">
11-
</igx-date-range-end>
12-
</igx-date-range-picker>
13-
</div>
1+
<igx-date-range-picker [(ngModel)]="range" [overlaySettings]="{ outlet: element }">
2+
<igx-date-range-start>
3+
<input igxInput igxDateTimeEditor type="text">
4+
<igx-picker-toggle igxPrefix>
5+
<igx-icon>calendar_today</igx-icon>
6+
</igx-picker-toggle>
7+
</igx-date-range-start>
8+
<igx-date-range-end>
9+
<input igxInput igxDateTimeEditor type="text">
10+
</igx-date-range-end>
11+
</igx-date-range-picker>

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ $custom-calendar-theme: igx-calendar-theme(
4444
}
4545
}
4646

47-
.date-range-picker-wrapper {
47+
:host {
48+
display: block;
4849
padding: 1rem;
4950
}

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

+30-35
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,32 @@
1-
<div class="date-range-picker-wrapper">
2-
<igx-date-range-picker [(ngModel)]="rangeSingle" required>
3-
<label igxLabel>Period</label>
4-
</igx-date-range-picker>
5-
</div>
61

7-
<div class="date-range-picker-wrapper">
8-
<igx-date-range-picker [(ngModel)]="rangeSeparate" required>
9-
<igx-date-range-start>
10-
<igx-picker-toggle igxPrefix>
11-
<igx-icon>calendar_today</igx-icon>
12-
</igx-picker-toggle>
13-
<label igxLabel>Start Date</label>
14-
<input igxInput igxDateTimeEditor type="text">
15-
</igx-date-range-start>
16-
<igx-date-range-end>
17-
<label igxLabel>End Date</label>
18-
<input igxInput igxDateTimeEditor type="text">
19-
</igx-date-range-end>
20-
</igx-date-range-picker>
21-
</div>
2+
<igx-date-range-picker [(ngModel)]="rangeSingle" required>
3+
<label igxLabel>Period</label>
4+
</igx-date-range-picker>
225

23-
<div class="date-range-picker-wrapper">
24-
<igx-date-range-picker>
25-
<igx-date-range-start>
26-
<igx-picker-toggle igxPrefix>
27-
<igx-icon>calendar_today</igx-icon>
28-
</igx-picker-toggle>
29-
<label igxLabel>Start Date</label>
30-
<input igxInput igxDateTimeEditor [(ngModel)]="startDate" type="text" required>
31-
</igx-date-range-start>
32-
<igx-date-range-end>
33-
<label igxLabel>End Date</label>
34-
<input igxInput igxDateTimeEditor [(ngModel)]="endDate" type="text" required>
35-
</igx-date-range-end>
36-
</igx-date-range-picker>
37-
</div>
6+
<igx-date-range-picker [(ngModel)]="rangeSeparate" required>
7+
<igx-date-range-start>
8+
<igx-picker-toggle igxPrefix>
9+
<igx-icon>calendar_today</igx-icon>
10+
</igx-picker-toggle>
11+
<label igxLabel>Start Date</label>
12+
<input igxInput igxDateTimeEditor type="text">
13+
</igx-date-range-start>
14+
<igx-date-range-end>
15+
<label igxLabel>End Date</label>
16+
<input igxInput igxDateTimeEditor type="text">
17+
</igx-date-range-end>
18+
</igx-date-range-picker>
19+
20+
<igx-date-range-picker>
21+
<igx-date-range-start>
22+
<igx-picker-toggle igxPrefix>
23+
<igx-icon>calendar_today</igx-icon>
24+
</igx-picker-toggle>
25+
<label igxLabel>Start Date</label>
26+
<input igxInput igxDateTimeEditor [(ngModel)]="startDate" type="text" required>
27+
</igx-date-range-start>
28+
<igx-date-range-end>
29+
<label igxLabel>End Date</label>
30+
<input igxInput igxDateTimeEditor [(ngModel)]="endDate" type="text" required>
31+
</igx-date-range-end>
32+
</igx-date-range-picker>

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

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1-
.date-range-picker-wrapper {
2-
padding: 1rem;
1+
:host {
2+
igx-date-range-picker {
3+
padding: 1rem;
4+
}
35
}

0 commit comments

Comments
 (0)