Skip to content

Commit dd21608

Browse files
ddariboddaribo
committed
feat(drp-sample): add WC drp + properties panel for manual testing
1 parent c0858a8 commit dd21608

File tree

6 files changed

+285
-7
lines changed

6 files changed

+285
-7
lines changed

‎src/app/date-range/date-range.sample.html

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,107 @@
1+
<div class="angular-wc" [igSize]="properties.size">
2+
<div class="angular-wc">
3+
<h6>Angular Date Range Picker, two inputs, template-driven form</h6>
4+
<igx-date-range-picker
5+
name="dp3"
6+
[(ngModel)]="properties.value"
7+
[mode]="properties.mode"
8+
[disabled]="properties.disabled"
9+
[required]="properties.required"
10+
[displayFormat]="properties.displayFormat"
11+
[minValue]="properties.minValue"
12+
[maxValue]="properties.maxValue"
13+
[disabledDates]="disabledDates"
14+
[specialDates]="specialDates"
15+
[hasHeader]="properties.hasHeader"
16+
[orientation]="properties.orientation"
17+
[headerOrientation]="properties.headerOrientation"
18+
[displayMonthsCount]="properties.visibleMonths"
19+
>
20+
<igx-date-range-start>
21+
@if (properties.headerTemplate) {
22+
<ng-template igxCalendarHeader let-formatCalendar>
23+
Custom header content
24+
</ng-template>
25+
}
26+
@if (properties.calendarTitle) {
27+
<ng-template igxCalendarHeaderTitle let-formatCalendar>
28+
Custom calendar title
29+
</ng-template>
30+
}
31+
@if (properties.separator) {
32+
<ng-template igxDateRangeSeparator>
33+
<span>{{ properties.separator }}</span>
34+
</ng-template>
35+
}
36+
<igx-picker-toggle igxPrefix>
37+
<igx-icon>date_range</igx-icon>
38+
</igx-picker-toggle>
39+
<igx-picker-clear igxSuffix>
40+
<igx-icon>clear</igx-icon>
41+
</igx-picker-clear>
42+
<label igxLabel>Start date</label>
43+
<input
44+
igxInput
45+
[igxDateTimeEditor]="properties.inputFormat"
46+
type="text"
47+
[placeholder]="properties.placeholder"
48+
/>
49+
</igx-date-range-start>
50+
<igx-date-range-end>
51+
<igx-picker-toggle igxPrefix>
52+
<igx-icon>date_range</igx-icon>
53+
</igx-picker-toggle>
54+
<igx-picker-clear igxSuffix>
55+
<igx-icon>clear</igx-icon>
56+
</igx-picker-clear>
57+
<label igxLabel>End date</label>
58+
<input
59+
igxInput
60+
[igxDateTimeEditor]="properties.inputFormat"
61+
type="text"
62+
[placeholder]="properties.placeholder"
63+
/>
64+
</igx-date-range-end>
65+
</igx-date-range-picker>
66+
</div>
67+
68+
<div class="angular-wc">
69+
<h6>WC Date Range Picker, two inputs</h6>
70+
<igc-date-range-picker
71+
use-two-inputs
72+
outlined
73+
[value]="properties.value"
74+
[mode]="properties.mode"
75+
[required]="properties.required"
76+
[disabled]="properties.disabled"
77+
[placeholderStart]="properties.placeholder"
78+
[placeholderEnd]="properties.placeholder"
79+
[inputFormat]="properties.inputFormat"
80+
[displayFormat]="properties.displayFormat"
81+
[min]="properties.minValue"
82+
[max]="properties.maxValue"
83+
[disabledDates]="disabledDates"
84+
[specialDates]="specialDates"
85+
[hasHeader]="properties.hasHeader"
86+
[orientation]="properties.orientation"
87+
[headerOrientation]="properties.headerOrientation"
88+
[visibleMonths]="properties.visibleMonths"
89+
label-start="Start date"
90+
label-end="End date"
91+
>
92+
@if (properties.headerTemplate) {
93+
<span slot="header-date"> Custom header content </span>
94+
}
95+
@if (properties.calendarTitle) {
96+
<span slot="title"> Custom calendar title </span>
97+
}
98+
@if (properties.separator) {
99+
<span slot="separator">{{ properties.separator }}</span>
100+
}
101+
</igc-date-range-picker>
102+
</div>
103+
</div>
104+
1105
<section class="sample-content">
2106
<div class="sample-row">
3107
<div class="range-holder">

‎src/app/date-range/date-range.sample.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,3 +35,7 @@ $range-sample-space: 16px;
3535
display: flex;
3636
max-width: 1200px;
3737
}
38+
39+
.angular-wc, h6 {
40+
margin: 18px;
41+
}

‎src/app/date-range/date-range.sample.ts

Lines changed: 166 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,38 @@
1-
import { Component, ViewChild } from '@angular/core';
1+
import { Component, CUSTOM_ELEMENTS_SCHEMA, DestroyRef, ViewChild } from '@angular/core';
22
import { JsonPipe } from '@angular/common';
33
import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormControl, ValidatorFn, AbstractControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
4+
import { DateRange, IgxButtonDirective, IgxDateRangePickerComponent, IgxDateTimeEditorDirective, IgxInputDirective, IgxLabelDirective, IgxRadioComponent, IgxRippleDirective, IGX_INPUT_GROUP_TYPE, IChangeCheckboxEventArgs, IGX_DATE_RANGE_PICKER_DIRECTIVES, IgxIconComponent, IgSizeDirective } from 'igniteui-angular';
45
import { DateRangeType } from 'igniteui-angular/src/lib/calendar/common/types';
6+
import { defineComponents, IgcButtonComponent, IgcDateRangePickerComponent, IgcDateTimeInputComponent, IgcIconComponent } from 'igniteui-webcomponents';
7+
import { Properties, PropertyChangeService, PropertyPanelConfig } from '../properties-panel/property-change.service';
58

9+
defineComponents(IgcDateRangePickerComponent, IgcButtonComponent, IgcIconComponent, IgcDateTimeInputComponent);
610

711
@Component({
812
selector: 'app-date-range',
913
templateUrl: './date-range.sample.html',
1014
styleUrls: ['./date-range.sample.scss'],
15+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
1116
providers: [
1217
{
1318
provide: IGX_INPUT_GROUP_TYPE,
1419
useValue: 'border'
1520
}
1621
],
17-
imports: [IgxButtonDirective, IgxRippleDirective, IgxDateRangePickerComponent, IgxPickerToggleComponent, IgxSuffixDirective, IgxIconComponent, IgxDateRangeStartComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxPrefixDirective, IgxDateRangeEndComponent, FormsModule, IgxLabelDirective, IgxRadioComponent, ReactiveFormsModule, JsonPipe]
22+
imports: [
23+
IgxButtonDirective,
24+
IgxRippleDirective,
25+
FormsModule,
26+
IgxLabelDirective,
27+
IgxRadioComponent,
28+
ReactiveFormsModule,
29+
JsonPipe,
30+
IGX_DATE_RANGE_PICKER_DIRECTIVES,
31+
IgxInputDirective,
32+
IgxDateTimeEditorDirective,
33+
IgxIconComponent,
34+
IgSizeDirective
35+
]
1836
})
1937
export class DateRangeSampleComponent {
2038
@ViewChild('dr1', { static: true })
@@ -29,22 +47,155 @@ export class DateRangeSampleComponent {
2947
public range6Start = null;
3048
public range6End = null;
3149
public range6: DateRange = { start: this.range6Start, end: this.range6End };
32-
public minDate: Date = new Date();
50+
public minDate: Date = new Date(new Date().setDate(new Date().getDate() - 20));
3351
public maxDate: Date = new Date(new Date().setDate(new Date().getDate() + 25));
3452

3553
public reactiveForm: UntypedFormGroup;
54+
public DateRangeType = DateRangeType;
3655

3756
public updateOnOptions: string[] = ['change', 'blur', 'submit'];
3857
public updateOn = 'blur';
3958

59+
60+
public specialDates = [{
61+
type: DateRangeType.Between, dateRange: [
62+
new Date(new Date().getFullYear(), new Date().getMonth(), 3),
63+
new Date(new Date().getFullYear(), new Date().getMonth(), 8)
64+
]
65+
}];
66+
4067
public disabledDates = [{
4168
type: DateRangeType.Between, dateRange: [
4269
new Date(new Date().getFullYear(), new Date().getMonth(), 20),
4370
new Date(new Date().getFullYear(), new Date().getMonth(), 25)
4471
]
4572
}];
4673

47-
constructor(fb: UntypedFormBuilder) {
74+
public panelConfig: PropertyPanelConfig = {
75+
size: {
76+
control: {
77+
type: 'button-group',
78+
options: ['small', 'medium', 'large'],
79+
defaultValue: 'medium',
80+
}
81+
},
82+
mode: {
83+
control: {
84+
type: 'button-group',
85+
options: ['dropdown', 'dialog'],
86+
defaultValue: 'dropdown'
87+
}
88+
},
89+
value: {
90+
control: {
91+
type: 'date-range',
92+
defaultValue: this.range3
93+
}
94+
},
95+
minValue: {
96+
label: 'Min Value',
97+
control: {
98+
type: 'date',
99+
defaultValue: this.minDate
100+
}
101+
},
102+
maxValue: {
103+
label: 'Max Value',
104+
control: {
105+
type: 'date',
106+
defaultValue: this.maxDate
107+
}
108+
},
109+
required: {
110+
control: {
111+
type: 'boolean',
112+
defaultValue: false
113+
}
114+
},
115+
disabled: {
116+
control: {
117+
type: 'boolean',
118+
defaultValue: false
119+
}
120+
},
121+
placeholder: {
122+
control: {
123+
type: 'text',
124+
defaultValue: 'MM/dd/yyyy'
125+
}
126+
},
127+
displayFormat: {
128+
label: 'Display Format',
129+
control: {
130+
type: 'text'
131+
}
132+
},
133+
inputFormat: {
134+
label: 'Input Format',
135+
control: {
136+
type: 'text'
137+
}
138+
},
139+
hasHeader: {
140+
label: 'Has Header (for dialog mode)',
141+
control: {
142+
type: 'boolean',
143+
defaultValue: true
144+
}
145+
},
146+
orientation: {
147+
label: 'Orientation',
148+
control: {
149+
type: 'button-group',
150+
options: ['horizontal', 'vertical'],
151+
defaultValue: 'horizontal'
152+
}
153+
},
154+
headerOrientation: {
155+
label: 'Header Orientation (dialog mode)',
156+
control: {
157+
type: 'button-group',
158+
options: ['horizontal', 'vertical'],
159+
defaultValue: 'horizontal'
160+
}
161+
},
162+
headerTemplate: {
163+
label: 'Show Header Template (dialog)',
164+
control: {
165+
type: 'boolean',
166+
defaultValue: false
167+
}
168+
},
169+
calendarTitle: {
170+
label: 'Show Calendar Title (dialog)',
171+
control: {
172+
type: 'boolean',
173+
defaultValue: false
174+
}
175+
},
176+
separator: {
177+
label: 'Separator text',
178+
control: {
179+
type: 'text',
180+
defaultValue: 'to'
181+
}
182+
},
183+
visibleMonths: {
184+
label: 'Visible Months',
185+
control: {
186+
type: 'number',
187+
defaultValue: 2,
188+
}
189+
},
190+
};
191+
192+
public properties: Properties;
193+
194+
constructor(
195+
fb: UntypedFormBuilder,
196+
private propertyChangeService: PropertyChangeService,
197+
private destroyRef: DestroyRef
198+
) {
48199
const today = new Date();
49200
const in5days = new Date();
50201
in5days.setDate(today.getDate() + 5);
@@ -60,6 +211,17 @@ export class DateRangeSampleComponent {
60211
start6: ['', { validators: Validators.required, updateOn: this.updateOn }],
61212
end6: ['', { validators: Validators.required, updateOn: this.updateOn }],
62213
});
214+
215+
this.propertyChangeService.setPanelConfig(this.panelConfig);
216+
217+
const propertyChange =
218+
this.propertyChangeService.propertyChanges.subscribe(
219+
(properties) => {
220+
this.properties = properties;
221+
}
222+
);
223+
224+
this.destroyRef.onDestroy(() => propertyChange.unsubscribe());
63225
}
64226

65227
public updateOnChange(e: IChangeCheckboxEventArgs) {

‎src/app/properties-panel/properties-panel.component.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,11 @@ <h5 class="properties-panel__title">Properties Panel</h5>
4646
<igx-date-picker [formControlName]="key" mode="dialog"></igx-date-picker>
4747
}
4848

49+
<!-- Date Range Picker -->
50+
@if (getControlType(key) === 'date-range') {
51+
<igx-date-range-picker [formControlName]="key" mode="dialog" type="border"></igx-date-range-picker>
52+
}
53+
4954
<!-- Time Picker -->
5055
@if (getControlType(key) === 'time') {
5156
<igx-time-picker [formControlName]="key"></igx-time-picker>

‎src/app/properties-panel/properties-panel.component.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,8 @@ import {
2525
IgxSelectItemComponent,
2626
IgxDatePickerComponent,
2727
IgxTimePickerComponent,
28-
IgxDateTimeEditorModule
28+
IgxDateTimeEditorModule,
29+
IgxDateRangePickerComponent
2930
} from 'igniteui-angular';
3031

3132
@Component({
@@ -48,7 +49,8 @@ import {
4849
IgxSelectItemComponent,
4950
IgxDatePickerComponent,
5051
IgxTimePickerComponent,
51-
IgxDateTimeEditorModule
52+
IgxDateTimeEditorModule,
53+
IgxDateRangePickerComponent
5254
]
5355
})
5456

‎src/app/properties-panel/property-change.service.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ export type ControlType =
1313
'text' |
1414
'date' |
1515
'time' |
16-
'date-time';
16+
'date-time' |
17+
'date-range';
1718

1819
// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
1920
export type PropertyPanelConfig = {

0 commit comments

Comments
 (0)