Skip to content

Commit 689868f

Browse files
LipataLipata
authored
Merge pull request #1977 from IgniteUI/hPopov/text-selection-samples
Adding text selection directive samples
2 parents 3e6e326 + d948773 commit 689868f

15 files changed

+105
-41
lines changed

‎live-editing/configs/DateTimeEditorConfigGenerator.ts

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { IgxDateTimeEditorModule, IgxIconModule, IgxInputGroupModule } from "igniteui-angular";
1+
import { IgxDateTimeEditorModule, IgxIconModule, IgxInputGroupModule, IgxTextSelectionModule } from "igniteui-angular";
22
import { DateTimeAdvancedComponent } from "../../src/app/scheduling/datetimeeditor/datetime-advanced/datetime-advanced";
33
import {
44
DateTimeBasicComponent
@@ -15,9 +15,10 @@ export class DateTimeEditorConfigGenerator implements IConfigGenerator {
1515
new Config({
1616
component: DateTimeBasicComponent,
1717
appModuleConfig: new AppModuleConfig({
18-
imports: [IgxInputGroupModule, DateTimeBasicComponent, IgxDateTimeEditorModule],
18+
imports: [IgxInputGroupModule, DateTimeBasicComponent,
19+
IgxDateTimeEditorModule, IgxTextSelectionModule],
1920
ngDeclarations: [DateTimeBasicComponent],
20-
ngImports: [IgxInputGroupModule, IgxDateTimeEditorModule]
21+
ngImports: [IgxInputGroupModule, IgxDateTimeEditorModule, IgxTextSelectionModule]
2122
}),
2223
shortenComponentPathBy: "/scheduling/datetimeeditor"
2324
})

‎live-editing/configs/InputGroupConfigGenerator.ts

+22-12
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
/* tslint:disable:object-literal-sort-keys */
2+
// tslint:disable: max-line-length
23
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
3-
import { IgxButtonModule, IgxComboModule, IgxDatePickerModule, IgxDropDownModule,
4-
IgxIconModule, IgxInputGroupModule, IgxRippleModule, IgxSelectModule, IgxTimePickerModule } from "igniteui-angular";
5-
import { InputGroupSample1Component
6-
} from "../../src/app/data-entries/input-group/input-group-sample-1/input-group-sample-1.component";
7-
import { InputGroupSample2Component
8-
} from "../../src/app/data-entries/input-group/input-group-sample-2/input-group-sample-2.component";
9-
import { InputGroupSample5Component
10-
} from "../../src/app/data-entries/input-group/input-group-sample-5/input-group-sample-5.component";
11-
import { InputGroupStyleComponent
12-
} from "../../src/app/data-entries/input-group/input-group-styling/input-group-styling.component";
13-
import { ReactiveFormsSampleComponent
14-
} from "../../src/app/data-entries/input-group/reactive-forms/reactive-forms.component";
4+
import { IgxButtonModule, IgxComboModule, IgxDatePickerModule,
5+
IgxDropDownModule, IgxFocusModule,
6+
IgxIconModule, IgxInputGroupModule,
7+
IgxRippleModule, IgxSelectModule,
8+
IgxTextSelectionModule, IgxTimePickerModule } from "igniteui-angular";
9+
import { InputGroupSample1Component } from "../../src/app/data-entries/input-group/input-group-sample-1/input-group-sample-1.component";
10+
import { InputGroupSample2Component } from "../../src/app/data-entries/input-group/input-group-sample-2/input-group-sample-2.component";
11+
import { InputGroupSample5Component } from "../../src/app/data-entries/input-group/input-group-sample-5/input-group-sample-5.component";
12+
import { InputGroupStyleComponent } from "../../src/app/data-entries/input-group/input-group-styling/input-group-styling.component";
13+
import { InputTextSelectionComponent } from "../../src/app/data-entries/input-group/input-text-selection/input-text-selection.component";
14+
import { ReactiveFormsSampleComponent } from "../../src/app/data-entries/input-group/reactive-forms/reactive-forms.component";
1515
import { AppModuleConfig } from "./core/AppModuleConfig";
1616
import { Config } from "./core/Config";
1717
import { IConfigGenerator } from "./core/IConfigGenerator";
@@ -92,6 +92,16 @@ export class InputGroupConfigGenerator implements IConfigGenerator {
9292
shortenComponentPathBy: "/data-entries/"
9393
}));
9494

95+
configs.push(new Config({
96+
component: InputTextSelectionComponent,
97+
appModuleConfig: new AppModuleConfig({
98+
imports: [IgxInputGroupModule, InputTextSelectionComponent, IgxTextSelectionModule, IgxFocusModule],
99+
ngDeclarations: [InputTextSelectionComponent],
100+
ngImports: [IgxInputGroupModule, IgxTextSelectionModule, IgxFocusModule]
101+
}),
102+
shortenComponentPathBy: "/data-entries/"
103+
}));
104+
95105
return configs;
96106
}
97107
}

‎live-editing/configs/MaskConfigGenerator.ts

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* tslint:disable:object-literal-sort-keys */
22
import {
3-
IgxIconModule, IgxInputGroupModule, IgxMaskModule, IgxSnackbarModule, IgxSwitchModule
3+
IgxIconModule, IgxInputGroupModule, IgxMaskModule, IgxSnackbarModule, IgxSwitchModule, IgxTextSelectionModule
44
} from "igniteui-angular";
55
import { MaskSample1Component } from "../../src/app/data-display/mask/mask-sample-1/mask-sample-1.component";
66
import { MaskSample2Component } from "../../src/app/data-display/mask/mask-sample-2/mask-sample-2.component";
@@ -20,9 +20,10 @@ export class MaskConfigGenerator implements IConfigGenerator {
2020
configs.push(new Config({
2121
component: MaskSample1Component,
2222
appModuleConfig: new AppModuleConfig({
23-
imports: [IgxSnackbarModule, IgxMaskModule, IgxInputGroupModule, MaskSample1Component],
23+
imports: [IgxSnackbarModule, IgxMaskModule, IgxInputGroupModule,
24+
MaskSample1Component, IgxTextSelectionModule],
2425
ngDeclarations: [MaskSample1Component],
25-
ngImports: [IgxSnackbarModule, IgxMaskModule, IgxInputGroupModule]
26+
ngImports: [IgxSnackbarModule, IgxMaskModule, IgxInputGroupModule, IgxTextSelectionModule]
2627
}),
2728
shortenComponentPathBy: "/data-display/mask/"
2829
}));

‎src/app/data-display/data-display.module.ts

+5-3
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import { NgModule } from "@angular/core";
33
import { FormsModule } from "@angular/forms";
44
import {
55
IgxAvatarModule, IgxBadgeModule, IgxButtonModule, IgxChipsModule,
6-
IgxDropDownModule, IgxFilterModule, IgxForOfModule, IgxIconModule, IgxInputGroupModule,
7-
IgxListModule, IgxMaskModule, IgxProgressBarModule, IgxRippleModule, IgxSnackbarModule,
8-
IgxSwitchModule, IgxTextHighlightModule, IgxToastModule
6+
IgxDropDownModule, IgxFilterModule, IgxFocusModule, IgxForOfModule,
7+
IgxIconModule, IgxInputGroupModule, IgxListModule, IgxMaskModule, IgxProgressBarModule,
8+
IgxRippleModule, IgxSnackbarModule, IgxSwitchModule, IgxTextHighlightModule, IgxTextSelectionModule, IgxToastModule
99
} from "igniteui-angular";
1010
import { BadgeSample2Component } from "./badge/badge-sample-2/badge-sample-2.component";
1111
import { BadgeSample3Component } from "./badge/badge-sample-3/badge-sample-3.component";
@@ -104,6 +104,8 @@ import { TextHighlightStyleComponent } from "./text-highlight/text-highlight-sty
104104
IgxListModule,
105105
IgxChipsModule,
106106
IgxDropDownModule,
107+
IgxFocusModule,
108+
IgxTextSelectionModule,
107109
IgxInputGroupModule,
108110
IgxToastModule,
109111
IgxButtonModule,

‎src/app/data-display/mask/mask-sample-1/mask-sample-1.component.html

+6-5
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,16 @@ <h5 class="form-title">Personal Data</h5>
88

99
<igx-input-group>
1010
<label igxLabel for="email">Birthday</label>
11-
<input igxInput #dateInput name="birthday" type="text" [igxMask]="'00/00/0000'" [(ngModel)]="person.birthday"
12-
(blur)="validateDate(dateInput, snackbar)" />
11+
<input igxInput #dateInput [igxMask]="'00/00/0000'" [igxTextSelection]="true" name="birthday" type="text"
12+
[(ngModel)]="person.birthday" (blur)="validateDate(dateInput, snackbar)" />
1313
</igx-input-group>
1414

1515
<igx-input-group>
1616
<label igxLabel for="socialSecurityNumber">Social Security Number</label>
17-
<input igxInput #ssn name="socialSecurityNumber" type="text" [igxMask]="'###-##-####'" [(ngModel)]="person.socialSecurityNumber"
18-
(blur)="validateSSN(ssn, snackbar)" />
17+
<input igxInput #ssn [igxMask]="'###-##-####'" [igxTextSelection]="true" name="socialSecurityNumber" type="text"
18+
[(ngModel)]="person.socialSecurityNumber" (blur)="validateSSN(ssn, snackbar)" />
19+
1920
</igx-input-group>
2021

2122
<igx-snackbar #snackbar></igx-snackbar>
22-
</form>
23+
</form>

‎src/app/data-display/mask/mask-sample-1/mask-sample-1.component.ts

-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import { Person } from "../model/person";
99

1010
export class MaskSample1Component implements OnInit {
1111
public person: Person;
12-
1312
constructor() {
1413
this.person = {
1514
birthday: null,

‎src/app/data-entries/data-entries-routes-data.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -57,5 +57,6 @@ export const dataEntriesRoutesData = {
5757
"select-styling": { displayName: "Select Styling", parentName: "Select" },
5858
"select-input-directives": { displayName: "Select Input Directives", parentName: "Select" },
5959
"select-form": { displayName: "Select In a Form", parentName: "Select" },
60-
"select-header-footer": { displayName: "Select with Header&Footer Templates", parentName: "Select" }
60+
"select-header-footer": { displayName: "Select with Header&Footer Templates", parentName: "Select" },
61+
"input-text-selection": {displayName: "Input with Text Selection", parentName: "Input Group"}
6162
};

‎src/app/data-entries/data-entries-routing.module.ts

+6
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ import { InputGroupSample4Component } from "./input-group/input-group-sample-4/i
4141
import { InputGroupSample5Component } from "./input-group/input-group-sample-5/input-group-sample-5.component";
4242
import { InputGroupSample6Component } from "./input-group/input-group-sample-6/input-group-sample-6.component";
4343
import { InputGroupStyleComponent } from "./input-group/input-group-styling/input-group-styling.component";
44+
import { InputTextSelectionComponent } from "./input-group/input-text-selection/input-text-selection.component";
4445
import { ReactiveFormsSampleComponent } from "./input-group/reactive-forms/reactive-forms.component";
4546
import { RadioGroupSampleComponent } from "./radio/radio-group-sample/radio-group-sample.component";
4647
import { RadioSample1Component } from "./radio/radio-sample-1/radio-sample-1.component";
@@ -344,6 +345,11 @@ export const dataEntriesRoutes: Routes = [
344345
component: SelectHeaderFooterComponent,
345346
data: dataEntriesRoutesData["select-header-footer"],
346347
path: "select-header-footer"
348+
},
349+
{
350+
component: InputTextSelectionComponent,
351+
data: dataEntriesRoutesData["input-text-selection"],
352+
path: "input-text-selection"
347353
}
348354
];
349355

‎src/app/data-entries/data-entries.module.ts

+9-5
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ import { NgModule } from "@angular/core";
44
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
55
import {
66
IgxAutocompleteModule, IgxButtonGroupModule, IgxButtonModule, IgxCheckboxModule, IgxComboModule,
7-
IgxDatePickerModule, IgxDialogModule, IgxDropDownModule, IgxForOfModule, IgxIconModule,
8-
IgxInputGroupModule, IgxNavbarModule, IgxProgressBarModule, IgxRadioModule, IgxRippleModule, IgxSelectModule,
9-
IgxSwitchModule, IgxTimePickerModule, IgxToastModule, IgxToggleModule
7+
IgxDatePickerModule, IgxDialogModule, IgxDropDownModule, IgxFocusModule, IgxForOfModule,
8+
IgxIconModule, IgxInputGroupModule, IgxNavbarModule, IgxProgressBarModule, IgxRadioModule, IgxRippleModule,
9+
IgxSelectModule, IgxSwitchModule, IgxTextSelectionModule, IgxTimePickerModule, IgxToastModule, IgxToggleModule
1010
} from "igniteui-angular";
1111
import { AutocompleteRemote } from "./autocomplete/autocomplete-remote/autocomplete-remote.component";
1212
import { AutocompleteBasic, AutocompletePipeStartsWith } from "./autocomplete/autocomplete/autocomplete.component";
@@ -53,6 +53,7 @@ import { InputGroupSample4Component } from "./input-group/input-group-sample-4/i
5353
import { InputGroupSample5Component } from "./input-group/input-group-sample-5/input-group-sample-5.component";
5454
import { InputGroupSample6Component } from "./input-group/input-group-sample-6/input-group-sample-6.component";
5555
import { InputGroupStyleComponent } from "./input-group/input-group-styling/input-group-styling.component";
56+
import { InputTextSelectionComponent } from "./input-group/input-text-selection/input-text-selection.component";
5657
import { ReactiveFormsSampleComponent } from "./input-group/reactive-forms/reactive-forms.component";
5758
import { RadioGroupSampleComponent } from "./radio/radio-group-sample/radio-group-sample.component";
5859
import { RadioSample1Component } from "./radio/radio-sample-1/radio-sample-1.component";
@@ -132,7 +133,8 @@ import { SwitchStylingComponent } from "./switch/switch-styling/switch-styling.c
132133
ButtonGroupSampleComponent,
133134
ButtonsDisplayDensityComponent,
134135
ButtonsStyleComponent,
135-
ButtonGroupStyleComponent
136+
ButtonGroupStyleComponent,
137+
InputTextSelectionComponent
136138
],
137139
imports: [
138140
CommonModule,
@@ -159,7 +161,9 @@ import { SwitchStylingComponent } from "./switch/switch-styling/switch-styling.c
159161
IgxSelectModule,
160162
IgxSwitchModule,
161163
IgxProgressBarModule,
162-
IgxForOfModule
164+
IgxForOfModule,
165+
IgxTextSelectionModule,
166+
IgxFocusModule
163167
]
164168
})
165169
export class DataEntriesModule { }

‎src/app/data-entries/input-group/input-text-selection/input-text-selection.component.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<article class="sample-column">
2+
<form>
3+
<igx-input-group>
4+
<input igxInput [igxTextSelection]="true" [(ngModel)]="person.fullName" name="fullName" type="text"/>
5+
<label igxLabel for="fullName">Full Name</label>
6+
</igx-input-group>
7+
<igx-input-group>
8+
<input igxInput [igxTextSelection]="true" [igxFocus]="isFocused" [(ngModel)]="person.email" name="email" type="text" />
9+
<label igxLabel for="email">Email</label>
10+
</igx-input-group>
11+
</form>
12+
</article>

‎src/app/data-entries/input-group/input-text-selection/input-text-selection.component.scss

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
2+
.sample-column {
3+
max-width: 550px;
4+
}

‎src/app/data-entries/input-group/input-text-selection/input-text-selection.component.ts

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { Component } from "@angular/core";
2+
3+
@Component({
4+
selector: "app-input-text-selection",
5+
templateUrl: "./input-text-selection.component.html",
6+
styleUrls: ["./input-text-selection.component.scss"]
7+
})
8+
export class InputTextSelectionComponent {
9+
10+
public person;
11+
public isFocused;
12+
constructor() {
13+
this.person = {
14+
fullName: "John Doe",
15+
email: "[email protected]"
16+
};
17+
this.isFocused = !!this.person.fullName;
18+
}
19+
20+
}

‎src/app/scheduling/datetimeeditor/datetime-basic/datetime-basic.component.html

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<div class="datetime-wrapper">
2-
<igx-input-group>
3-
<input type="text" igxInput [igxDateTimeEditor]="'dd/MM/yyyy'" [value]="date"/>
4-
</igx-input-group>
5-
</div>
1+
<igx-input-group>
2+
<label igxLabel>Choose Date</label>
3+
<input type="text" igxInput [igxDateTimeEditor]="'dd/MM/yyyy'" [value]="date" [igxTextSelection]="true"/>
4+
</igx-input-group>
5+

‎src/app/scheduling/datetimeeditor/datetime-basic/datetime-basic.component.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1-
.datetime-wrapper {
1+
:host {
2+
display: block;
23
padding: 1rem;
4+
max-width: 600px;
35
}

‎src/app/scheduling/scheduling.module.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import { FormsModule } from "@angular/forms";
44
import {
55
IgxAutocompleteModule, IgxButtonModule, IgxCalendarModule, IgxCardModule, IgxDatePickerModule,
66
IgxDateTimeEditorModule, IgxDialogModule, IgxDropDownModule, IgxIconModule, IgxInputGroupModule,
7-
IgxSelectModule, IgxSnackbarModule, IgxSwitchModule, IgxTimePickerModule, IgxToastModule, IgxToggleModule
7+
IgxSelectModule, IgxSnackbarModule, IgxSwitchModule, IgxTextSelectionModule,
8+
IgxTimePickerModule, IgxToastModule, IgxToggleModule
89
} from "igniteui-angular";
910
import { CalendarDaysViewComponent } from "./calendar/calendar-days-view/calendar-days-view.component";
1011
import { CalendarMonthsViewComponent } from "./calendar/calendar-months-view/calendar-months-view.component";
@@ -105,7 +106,7 @@ import { TimePickerStylingComponent } from "./timepicker/timepicker-styling/time
105106
IgxSelectModule,
106107
IgxDropDownModule,
107108
IgxToggleModule,
108-
IgxDateTimeEditorModule
109+
IgxTextSelectionModule
109110
]
110111
})
111112
export class SchedulingModule { }

0 commit comments

Comments
 (0)