Skip to content

Commit 676de70

Browse files
LipataLipata
committed
refactor(igx-range-date-picker): change names #5732 
1 parent 4ec4ff3 commit 676de70

15 files changed

+101
-102
lines changed

‎CHANGELOG.md

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -92,42 +92,42 @@ All notable changes for each version of this project will be documented in this
9292
- Added `IgxDateStartComponent` and `IgxDateEndComponent`.
9393
- The default template consists of a single *readonly* field:
9494
```html
95-
<igx-date-range [(ngModel)]="range"></igx-date-range>
95+
<igx-date-range-picker [(ngModel)]="range"></igx-date-range-picker>
9696
```
9797
- Projection of input fields using `igxDateTimeEditor`
9898
```html
99-
<igx-date-range>
100-
<igx-date-start>
99+
<igx-date-range-picker>
100+
<igx-date-range-start>
101101
<input igxInput igxDateTimeEditor [(ngModel)]="range.start">
102-
</igx-date-start>
103-
<igx-date-end>
102+
</igx-date-range-start>
103+
<igx-date-range-end>
104104
<input igxInput igxDateTimeEditor [(ngModel)]="range.end">
105-
</igx-date-end>
106-
</igx-date-range>
105+
</igx-date-range-end>
106+
</igx-date-range-picker>
107107
```
108108
- Added `IgxPickerToggleComponent` which allows templating of the default icon in the input through `igxPrefix` and `igxSuffix`.
109109
- default template:
110110
```html
111-
<igx-date-range>
111+
<igx-date-range-picker>
112112
<igx-picker-toggle igxSuffix>
113113
<igx-icon>calendar_view_day</igx-icon>
114114
</igx-picker-toggle>
115-
</igx-date-range>
115+
</igx-date-range-picker>
116116
```
117117
- with projections:
118118
```html
119-
<igx-date-range>
120-
<igx-date-start>
119+
<igx-date-range-picker>
120+
<igx-date-range-start>
121121
...
122122
<igx-picker-toggle igxPrefix>
123123
<igx-icon>calendar_view_day</igx-icon>
124124
</igx-picker-toggle>
125125
...
126-
</igx-date-start>
127-
<igx-date-end>
126+
</igx-date-range-start>
127+
<igx-date-range-end>
128128
...
129-
</igx-date-end>
130-
</igx-date-range>
129+
</igx-date-range-end>
130+
</igx-date-range-picker>
131131
```
132132

133133
### RTL Support

‎projects/igniteui-angular/src/lib/core/i18n/range-date-picker-resources.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
export interface IDateRangePickerResourceStrings {
2-
igx_date_range_picker_to?: string;
2+
igx_date_range_picker_date_separator?: string;
33
}
44

55
export const DateRangePickerResourceStringsEN: IDateRangePickerResourceStrings = {
6-
igx_date_range_picker_to: 'to'
6+
igx_date_range_picker_date_separator: 'to'
77
};

‎projects/igniteui-angular/src/lib/core/i18n/resources.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export const CurrentResourceStrings = {
1414
GridResStrings: cloneValue(GridResourceStringsEN),
1515
PaginatorResStrings: cloneValue(PaginatorResourceStringsEN),
1616
TimePickerResStrings: cloneValue(TimePickerResourceStringsEN),
17-
RangeDatePickerResStrings: cloneValue(DateRangePickerResourceStringsEN),
17+
DateRangePickerResStrings: cloneValue(DateRangePickerResourceStringsEN),
1818
CarouselResStrings: cloneValue(CarouselResourceStringsEN),
1919
};
2020

‎projects/igniteui-angular/src/lib/date-range/README.md renamed to ‎projects/igniteui-angular/src/lib/date-range-picker/README.md

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,12 @@ export class AppModule { }
1919
```
2020

2121
# Usage
22-
Import the `IgxDateRangeModule` in the module that you want to use it in:
22+
Import the `IgxDateRangePickerModule` in the module that you want to use it in:
2323
```typescript
24-
import { IgxDateRangeModule } from 'igniteui-angular';
24+
import { IgxDateRangePickerModule } from 'igniteui-angular';
2525

2626
@NgModule({
27-
imports: [IgxDateRangeModule]
27+
imports: [IgxDateRangePickerModule]
2828
})
2929
export class AppModule { }
3030
```
@@ -54,12 +54,12 @@ The default initialization produces a single *readonly* input:
5454
With `IgxDateStartComponent`, `IgxDateEndComponent` and `IgxDateTimeEditorDirective` two *editable* inputs can be projected:
5555
```html
5656
<igx-date-range-picker>
57-
<igx-date-start>
57+
<igx-date-range-start>
5858
<input igxInput igxDateTimeEditor [(ngModel)]="range.start">
59-
</igx-date-start>
60-
<igx-date-emd>
59+
</igx-date-range-start>
60+
<igx-date-range-end>
6161
<input igxInput igxDateTimeEditor [(ngModel)]="range.end">
62-
</igx-date-end>
62+
</igx-date-range-end>
6363
</igx-date-range-picker>
6464
```
6565

@@ -77,13 +77,13 @@ The default template:
7777
With projected inputs:
7878
```html
7979
<igx-date-range-picker>
80-
<igx-date-start>
80+
<igx-date-range-start>
8181
<igx-pickers-toggle igxPrefix>
8282
<igx-icon>calendar_view_day</igx-icon>
8383
</igx-pickers-toggle>
84-
</igx-date-start>
85-
<igx-date-end>
86-
</igx-date-end>
84+
</igx-date-range-start>
85+
<igx-date-range-end>
86+
</igx-date-range-end>
8787
</igx-date-range-picker>
8888
```
8989

@@ -110,7 +110,7 @@ With projected inputs:
110110
|:-----------------|:-------------------|:------------|
111111
| mode | InteractionMode | Sets whether `IgxDateRangePickerComponent` is in dialog or dropdown mode. |
112112
| monthsViewNumber | number | Sets the number displayed month views. Default is `2`. |
113-
| hideOutsideDays | boolean | Sets the whether dates that are not part of the current month will be displayed. Default value is `false`. |
113+
| hideOutsideDays | boolean | Sets whether dates that are not part of the current month will be displayed. Default value is `false`. |
114114
| weekStart | number | Sets the start day of the week. Can be assigned to a numeric value or to `WEEKDAYS` enum value. |
115115
| locale | string | Gets the `locale` of the calendar. Default value is `"en"`. |
116116
| formatter | function => string | Applies a custom formatter function on the selected or passed date. |

‎projects/igniteui-angular/src/lib/date-range/igx-date-range-inputs.common.html renamed to ‎projects/igniteui-angular/src/lib/date-range-picker/igx-date-range-picker-inputs.common.html

File renamed without changes.

‎projects/igniteui-angular/src/lib/date-range/igx-date-range-inputs.common.ts renamed to ‎projects/igniteui-angular/src/lib/date-range-picker/igx-date-range-picker-inputs.common.ts

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -116,19 +116,19 @@ export class IgxPickerToggleComponent {
116116
* @example
117117
* html```
118118
* <igx-date-range-picker mode="dropdown">
119-
* <igx-date-start>
119+
* <igx-date-range-start>
120120
* <input igxInput igxDateTimeEditor type="text">
121-
* </igx-date-start>
121+
* </igx-date-range-start>
122122
* ...
123123
* </igx-date-range-picker>
124124
* ```
125125
*/
126126
@Component({
127-
selector: 'igx-date-start',
127+
selector: 'igx-date-range-start',
128128
templateUrl: '../input-group/input-group.component.html',
129-
providers: [{ provide: IgxInputGroupBase, useExisting: IgxDateStartComponent }]
129+
providers: [{ provide: IgxInputGroupBase, useExisting: IgxDateRangeStartComponent }]
130130
})
131-
export class IgxDateStartComponent extends IgxDateRangeBaseComponent { }
131+
export class IgxDateRangeStartComponent extends IgxDateRangeBaseComponent { }
132132

133133
/**
134134
* Defines the end input for a date range picker
@@ -142,32 +142,32 @@ export class IgxDateStartComponent extends IgxDateRangeBaseComponent { }
142142
* @igxGroup scheduling
143143
*
144144
* @remarks
145-
* When templating, end input has to be template seperately
145+
* When templating, end input has to be template separately
146146
*
147147
* @example
148148
* ```html
149149
* <igx-date-range mode="dropdown">
150-
* <igx-date-end>
150+
* <igx-date-range-end>
151151
* <input igxInput igxDateTimeEditor type="text" required>
152-
* </igx-date-end>
152+
* </igx-date-range-end>
153153
* ...
154154
* </igx-date-range>
155155
* ```
156156
*/
157157
@Component({
158-
selector: 'igx-date-end',
158+
selector: 'igx-date-range-end',
159159
templateUrl: '../input-group/input-group.component.html',
160-
providers: [{ provide: IgxInputGroupBase, useExisting: IgxDateEndComponent }]
160+
providers: [{ provide: IgxInputGroupBase, useExisting: IgxDateRangeEndComponent }]
161161
})
162-
export class IgxDateEndComponent extends IgxDateRangeBaseComponent { }
162+
export class IgxDateRangeEndComponent extends IgxDateRangeBaseComponent { }
163163

164164
/** @hidden @internal */
165165
@Component({
166166
selector: 'igx-date-single',
167167
templateUrl: '../input-group/input-group.component.html',
168-
providers: [{ provide: IgxInputGroupBase, useExisting: IgxDateSingleComponent }]
168+
providers: [{ provide: IgxInputGroupBase, useExisting: IgxDateRangeSingleComponent }]
169169
})
170-
export class IgxDateSingleComponent extends IgxDateRangeBaseComponent {
170+
export class IgxDateRangeSingleComponent extends IgxDateRangeBaseComponent {
171171
public updateInput(value: any, inputFormat?: string, locale?: string) {
172172
value = new DateRangePickerFormatPipe().transform(value, inputFormat, locale);
173173
if (this.ngControl) {
@@ -179,9 +179,9 @@ export class IgxDateSingleComponent extends IgxDateRangeBaseComponent {
179179
}
180180

181181
@Directive({
182-
selector: '[igxDateSeparator]'
182+
selector: '[igxDateRangeSeparator]'
183183
})
184-
export class IgxDateSeparatorDirective {
184+
export class IgxDateRangeSeparatorDirective {
185185
}
186186

187187

‎projects/igniteui-angular/src/lib/date-range/igx-date-range.component.html renamed to ‎projects/igniteui-angular/src/lib/date-range-picker/igx-date-range-picker.component.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,11 @@
3131
</ng-template>
3232

3333
<ng-template #startEndTemplate>
34-
<ng-content select="igx-date-start"></ng-content>
34+
<ng-content select="igx-date-range-start"></ng-content>
3535
<div [className]="separatorClass">
3636
<ng-container *ngTemplateOutlet="dateSeparatorTemplate ? dateSeparatorTemplate : defDateSeparatorTemplate;"></ng-container>
3737
</div>
38-
<ng-content select="igx-date-end"></ng-content>
38+
<ng-content select="igx-date-range-end"></ng-content>
3939
</ng-template>
4040

4141
<ng-template #defIcon>

‎projects/igniteui-angular/src/lib/date-range/igx-date-range.component.spec.ts renamed to ‎projects/igniteui-angular/src/lib/date-range-picker/igx-date-range-picker.component.spec.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { IgxDateRangePickerComponent } from './igx-date-range.component';
1+
import { IgxDateRangePickerComponent } from './igx-date-range-picker.component';
22
import { ComponentFixture, async, TestBed, fakeAsync, tick } from '@angular/core/testing';
33
import { Component, OnInit, ViewChild, DebugElement } from '@angular/core';
44
import { IgxInputGroupModule } from '../input-group/index';
@@ -8,7 +8,7 @@ import { FormsModule } from '@angular/forms';
88
import { IgxIconModule } from '../icon';
99
import { IgxCalendarModule, IgxCalendarComponent } from '../calendar/index';
1010
import { IgxButtonModule } from '../directives/button/button.directive';
11-
import { IgxDateRangePickerModule } from './igx-date-range.module';
11+
import { IgxDateRangePickerModule } from './igx-date-range-picker.module';
1212
import { By } from '@angular/platform-browser';
1313
import { UIInteractions } from '../test-utils/ui-interactions.spec';
1414
import { configureTestSuite } from '../test-utils/configure-suite';
@@ -683,12 +683,12 @@ export class DateRangeTestComponent implements OnInit {
683683
selector: 'igx-date-range-two-inputs-test',
684684
template: `
685685
<igx-date-range-picker [mode]="mode">
686-
<igx-date-start>
686+
<igx-date-range-start>
687687
<input igxInput igxDateTimeEditor type="text" [(ngModel)]="startDate" required>
688-
</igx-date-start>
689-
<igx-date-end>
688+
</igx-date-range-start>
689+
<igx-date-range-end>
690690
<input igxInput igxDateTimeEditor type="text" [(ngModel)]="endDate" required>
691-
</igx-date-end>
691+
</igx-date-range-end>
692692
</igx-date-range-picker>
693693
`
694694
})

‎projects/igniteui-angular/src/lib/date-range/igx-date-range.component.ts renamed to ‎projects/igniteui-angular/src/lib/date-range-picker/igx-date-range-picker.component.ts

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,12 @@ import { PositionSettings } from '../services/overlay/utilities';
3030
import { fadeIn, fadeOut } from '../animations/fade';
3131
import {
3232
DateRange,
33-
IgxDateEndComponent,
34-
IgxDateSingleComponent,
35-
IgxDateStartComponent,
33+
IgxDateRangeEndComponent,
34+
IgxDateRangeSingleComponent,
35+
IgxDateRangeStartComponent,
3636
IgxPickerToggleComponent,
37-
IgxDateSeparatorDirective
38-
} from './igx-date-range-inputs.common';
37+
IgxDateRangeSeparatorDirective
38+
} from './igx-date-range-picker-inputs.common';
3939
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
4040
import { IToggleView } from '../core/navigation';
4141
import { IgxLabelDirective } from '../input-group';
@@ -60,7 +60,7 @@ const DEFAULT_INPUT_FORMAT = 'MM/dd/yyyy';
6060
*
6161
* @remarks
6262
* It displays the range selection in a single or two input fields.
63-
* The default template displays a single *readonly* input field while projecting `igx-date-start` and `igx-date-end`
63+
* The default template displays a single *readonly* input field while projecting `igx-date-range-start` and `igx-date-range-end`
6464
* displays two *editable* input fields.
6565
*
6666
* @example
@@ -70,7 +70,7 @@ const DEFAULT_INPUT_FORMAT = 'MM/dd/yyyy';
7070
*/
7171
@Component({
7272
selector: 'igx-date-range-picker',
73-
templateUrl: './igx-date-range.component.html',
73+
templateUrl: './igx-date-range-picker.component.html',
7474
providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => IgxDateRangePickerComponent), multi: true }]
7575
})
7676
export class IgxDateRangePickerComponent extends DisplayDensityBase
@@ -285,8 +285,8 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase
285285
public cssClass = 'igx-date-range-picker';
286286

287287
/** @hidden */
288-
@ViewChild(IgxDateSingleComponent)
289-
public single: IgxDateSingleComponent;
288+
@ViewChild(IgxDateRangeSingleComponent)
289+
public single: IgxDateRangeSingleComponent;
290290

291291
/** @hidden */
292292
@ViewChild(IgxCalendarComponent)
@@ -308,11 +308,11 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase
308308
public label: IgxLabelDirective;
309309

310310
/** @hidden */
311-
@ContentChild(IgxDateSeparatorDirective, { read: TemplateRef })
311+
@ContentChild(IgxDateRangeSeparatorDirective, { read: TemplateRef })
312312
public dateSeparatorTemplate: TemplateRef<any>;
313313

314314
/** @hidden */
315-
public dateSeparator = CurrentResourceStrings.RangeDatePickerResStrings.igx_range_date_picker_date_separator;
315+
public dateSeparator = CurrentResourceStrings.DateRangePickerResStrings.igx_date_range_picker_date_separator;
316316

317317
/** @hidden @internal */
318318
public get appliedFormat() {
@@ -329,7 +329,7 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase
329329

330330
/** @hidden @internal */
331331
public get hasProjectedInputs(): boolean {
332-
return this.projectedInputs.some(i => i instanceof IgxDateStartComponent || i instanceof IgxDateEndComponent);
332+
return this.projectedInputs.some(i => i instanceof IgxDateRangeStartComponent || i instanceof IgxDateRangeEndComponent);
333333
}
334334

335335
private get dropdownOverlaySettings(): OverlaySettings {
@@ -634,14 +634,14 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase
634634
this.toggleDirective.onClosed
635635
.pipe(takeUntil(this.$destroy))
636636
.subscribe(() => (
637-
this.single || this.projectedInputs.find(i => i instanceof IgxDateStartComponent) as IgxDateStartComponent
637+
this.single || this.projectedInputs.find(i => i instanceof IgxDateRangeStartComponent) as IgxDateRangeStartComponent
638638
)?.setFocus());
639639
}
640640

641641
private subscribeToDateEditorEvents() {
642642
if (this.hasProjectedInputs) {
643-
const start = this.projectedInputs.find(i => i instanceof IgxDateStartComponent) as IgxDateStartComponent;
644-
const end = this.projectedInputs.find(i => i instanceof IgxDateEndComponent) as IgxDateEndComponent;
643+
const start = this.projectedInputs.find(i => i instanceof IgxDateRangeStartComponent) as IgxDateRangeStartComponent;
644+
const end = this.projectedInputs.find(i => i instanceof IgxDateRangeEndComponent) as IgxDateRangeEndComponent;
645645
if (start && end) {
646646
start.dateTimeEditor.valueChange
647647
.pipe(takeUntil(this.$destroy))
@@ -684,8 +684,8 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase
684684
}
685685

686686
private updateInputs() {
687-
const start = this.projectedInputs?.find(i => i instanceof IgxDateStartComponent) as IgxDateStartComponent;
688-
const end = this.projectedInputs?.find(i => i instanceof IgxDateEndComponent) as IgxDateEndComponent;
687+
const start = this.projectedInputs?.find(i => i instanceof IgxDateRangeStartComponent) as IgxDateRangeStartComponent;
688+
const end = this.projectedInputs?.find(i => i instanceof IgxDateRangeEndComponent) as IgxDateRangeEndComponent;
689689
if (start && end && this.value) {
690690
start.updateInput(this.value.start);
691691
end.updateInput(this.value.end);

0 commit comments

Comments
 (0)