Skip to content

Commit 00220b9

Browse files
RogermaxRogermax
committed
Improvements
1 parent 228a619 commit 00220b9

12 files changed

+511
-106
lines changed

‎projects/angular-material-extensions/select-country/src/lib/mat-select-country.component.html

Lines changed: 25 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,11 @@
1-
<mat-form-field [appearance]="appearance">
1+
<mat-form-field
2+
[appearance]="appearance"
3+
[class.d-block]="extendWidth"
4+
[class.mdc-text-field--invalid]="this.required && !this.value"
5+
>
26
<mat-label *ngIf="label">{{ label }}</mat-label>
3-
<mat-icon
4-
*ngIf="this.value"
5-
[svgIcon]="this.value?.alpha2Code?.toLowerCase()"
6-
class="mr-12 s-20 secondary-text"
7-
matSuffix
8-
></mat-icon>
97
<input
108
*ngIf="!!formControl"
11-
(blur)="onBlur()"
129
autocomplete="off"
1310
[class]="class"
1411
[matAutocomplete]="this.countryAutocomplete"
@@ -21,11 +18,9 @@
2118
aria-label="country"
2219
matInput
2320
type="text"
24-
#inputElement
2521
/>
2622
<input
2723
*ngIf="!formControl"
28-
(blur)="onBlur()"
2924
(input)="inputChanged($event?.target?.value)"
3025
autocomplete="off"
3126
[class]="class"
@@ -46,7 +41,6 @@
4641
aria-label="country"
4742
matInput
4843
type="text"
49-
#inputElement
5044
/>
5145
<mat-progress-bar
5246
*ngIf="this.loadingDB || this.loading"
@@ -55,7 +49,6 @@
5549
<mat-autocomplete
5650
[panelWidth]="panelWidth"
5751
#countryAutocomplete="matAutocomplete"
58-
(opened)="autocompleteScroll()"
5952
(optionSelected)="onOptionsSelected($event)"
6053
>
6154
<mat-option *ngFor="let country of filteredOptions" [value]="country.name">
@@ -82,12 +75,25 @@
8275
</div>
8376
</mat-option>
8477
</mat-autocomplete>
85-
<mat-icon
86-
class="cursor-pointer pos-rel"
87-
matSuffix
88-
*ngIf="cleareable && !!value"
89-
(click)="clear()"
90-
>cancel</mat-icon
78+
<div class="d-flex mr-1" matSuffix>
79+
<mat-icon
80+
*ngIf="this.value"
81+
[svgIcon]="this.value?.alpha2Code?.toLowerCase()"
82+
class="ml-1 s-20 secondary-text"
83+
></mat-icon>
84+
<mat-icon
85+
class="ml-1"
86+
class="ml-1 cursor-pointer pos-rel"
87+
*ngIf="cleareable && !!value"
88+
(click)="clear()"
89+
>cancel</mat-icon
90+
>
91+
</div>
92+
<mat-error
93+
*ngIf="
94+
(formControl && formControl.invalid) ||
95+
(!formControl && required && !this.value)
96+
"
97+
>{{ error }}</mat-error
9198
>
92-
<mat-error *ngIf="formControl && formControl.invalid">{{ error }}</mat-error>
9399
</mat-form-field>

‎projects/angular-material-extensions/select-country/src/lib/mat-select-country.component.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,13 @@
1515
.d-flex {
1616
display: flex;
1717
width: 100%;
18+
}
19+
.mr-1 {
20+
margin-right: 1rem;
21+
}
22+
.ml-1 {
23+
margin-left: 1rem;
24+
}
25+
.d-block {
26+
display: block;
1827
}

‎projects/angular-material-extensions/select-country/src/lib/mat-select-country.component.ts

Lines changed: 61 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {
1717
ControlValueAccessor,
1818
FormControl,
1919
NG_VALUE_ACCESSOR,
20+
Validators,
2021
} from "@angular/forms";
2122
import {
2223
MatAutocomplete,
@@ -27,6 +28,7 @@ import { BehaviorSubject, combineLatest, fromEvent, Subject } from "rxjs";
2728
import { debounceTime, startWith, takeUntil } from "rxjs/operators";
2829
import { MatSelectCountryLangToken } from "./tokens";
2930
import { MatInput } from "@angular/material/input";
31+
import { deprecate } from "util";
3032

3133
/**
3234
* Country interface ISO 3166
@@ -69,9 +71,10 @@ export class MatSelectCountryComponent
6971
@Input() countries: Country[] = [];
7072
@Input() label: string;
7173
@Input() placeHolder = "Select country";
72-
@Input() required: boolean;
74+
@Input() required: boolean = false;
7375
@Input() disabled: boolean;
74-
@Input() nullable: boolean;
76+
/** @deprecated Use clearable to allow user unselect country.*/
77+
@Input() nullable: boolean = true;
7578
@Input() readonly: boolean;
7679
@Input() tabIndex: number | string;
7780
@Input() class: string;
@@ -83,14 +86,10 @@ export class MatSelectCountryComponent
8386
@Input() name: string = "country";
8487
@Input() error: string = "";
8588
@Input() cleareable: boolean = false;
86-
@Input() formControl?: FormControl | undefined = undefined;
87-
@Input() panelWidth: string | number = "";
88-
@Input("value") _value?: Country | undefined = undefined;
89-
90-
@ViewChild("countryAutocomplete") statesAutocompleteRef: MatAutocomplete;
91-
@ViewChild(MatAutocompleteTrigger)
92-
autocompleteTrigger: MatAutocompleteTrigger;
93-
@ViewChild("inputElement") inputElement: MatInput;
89+
@Input() formControl?: FormControl | undefined;
90+
@Input() panelWidth?: string | undefined;
91+
@Input("value") _value?: Country | undefined;
92+
@Input() extendWidth = false;
9493

9594
// tslint:disable-next-line: no-output-on-prefix
9695
@Output() onCountrySelected: EventEmitter<Country> =
@@ -250,27 +249,27 @@ export class MatSelectCountryComponent
250249
// }
251250
}
252251

252+
clear() {
253+
this.filterString = "";
254+
this._applyFilters("");
255+
this.value = null;
256+
if (!this.formControl) {
257+
this.onCountrySelected.emit(null);
258+
}
259+
}
260+
253261
inputChanged(value: string): void {
254262
console.log("input change detected: ", value);
263+
if (!value) {
264+
this.clear();
265+
return;
266+
}
255267
if (this.debounceTimeout) {
256268
clearTimeout(this.debounceTimeout);
257269
}
258-
this.debounceTimeout = setTimeout(
259-
() => this._applyFilters(value),
260-
this.debounceTime
261-
);
262-
this._applyFilters(value);
263-
}
264-
265-
onBlur() {
266-
if (
267-
this.nullable &&
268-
!this.inputElement.value &&
269-
this.statesAutocompleteRef.panel
270-
) {
271-
this._setValue(null);
272-
this.onCountrySelected.emit(null);
273-
}
270+
this.debounceTimeout = setTimeout(() => {
271+
this._applyFilters(value ?? "");
272+
}, this.debounceTime);
274273
}
275274

276275
onOptionsSelected($event: MatAutocompleteSelectedEvent) {
@@ -286,9 +285,7 @@ export class MatSelectCountryComponent
286285
}
287286

288287
writeValue(value) {
289-
if (value) {
290-
this.value = value;
291-
}
288+
this.value = value;
292289
}
293290

294291
registerOnChange(fn) {
@@ -299,48 +296,41 @@ export class MatSelectCountryComponent
299296
this.onTouched = fn;
300297
}
301298

302-
autocompleteScroll() {
303-
if (this.itemsLoadSize) {
304-
setTimeout(() => {
305-
if (
306-
this.statesAutocompleteRef &&
307-
this.autocompleteTrigger &&
308-
this.statesAutocompleteRef.panel
309-
) {
310-
fromEvent(this.statesAutocompleteRef.panel.nativeElement, "scroll")
311-
.pipe(takeUntil(this.autocompleteTrigger.panelClosingActions))
312-
.subscribe(() => {
313-
const scrollTop =
314-
this.statesAutocompleteRef.panel.nativeElement.scrollTop;
315-
const scrollHeight =
316-
this.statesAutocompleteRef.panel.nativeElement.scrollHeight;
317-
const elementHeight =
318-
this.statesAutocompleteRef.panel.nativeElement.clientHeight;
319-
const atBottom = scrollHeight === scrollTop + elementHeight;
320-
if (atBottom) {
321-
// fetch more data if not filtered
322-
if (this.filterString === "") {
323-
const fromIndex = this.filteredOptions.length;
324-
const toIndex: number =
325-
+this.filteredOptions.length + +this.itemsLoadSize;
326-
this.filteredOptions = [
327-
...this.filteredOptions,
328-
...this.countries.slice(fromIndex, toIndex),
329-
];
330-
}
331-
}
332-
});
333-
}
334-
});
335-
}
336-
}
337-
338-
clear() {
339-
this.filterString = "";
340-
this.inputChanged("");
341-
this._setValue(null);
342-
this.onCountrySelected.emit(null);
343-
}
299+
// autocompleteScroll() {
300+
// if (this.itemsLoadSize) {
301+
// setTimeout(() => {
302+
// if (
303+
// this.statesAutocompleteRef &&
304+
// this.autocompleteTrigger &&
305+
// this.statesAutocompleteRef.panel
306+
// ) {
307+
// fromEvent(this.statesAutocompleteRef.panel.nativeElement, "scroll")
308+
// .pipe(takeUntil(this.autocompleteTrigger.panelClosingActions))
309+
// .subscribe(() => {
310+
// const scrollTop =
311+
// this.statesAutocompleteRef.panel.nativeElement.scrollTop;
312+
// const scrollHeight =
313+
// this.statesAutocompleteRef.panel.nativeElement.scrollHeight;
314+
// const elementHeight =
315+
// this.statesAutocompleteRef.panel.nativeElement.clientHeight;
316+
// const atBottom = scrollHeight === scrollTop + elementHeight;
317+
// if (atBottom) {
318+
// // fetch more data if not filtered
319+
// if (this.filterString === "") {
320+
// const fromIndex = this.filteredOptions.length;
321+
// const toIndex: number =
322+
// +this.filteredOptions.length + +this.itemsLoadSize;
323+
// this.filteredOptions = [
324+
// ...this.filteredOptions,
325+
// ...this.countries.slice(fromIndex, toIndex),
326+
// ];
327+
// }
328+
// }
329+
// });
330+
// }
331+
// });
332+
// }
333+
// }
344334

345335
async _loadCountriesFromDb(alpha2Code?: string): Promise<void> {
346336
this.loadingDB = true;

‎src/app/app.component.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -233,6 +233,7 @@ <h2>Install</h2>
233233
<app-minimal></app-minimal>
234234
<app-default></app-default>
235235
<app-all></app-all>
236+
<app-all-formcontrol></app-all-formcontrol>
236237
<!--
237238
<h2>Usage</h2>
238239
<div fxLayoutAlign="center">

‎src/app/app.module.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,17 @@ import { MinimalComponent } from "./examples/minimal/minimal.component";
1616
import { DefaultComponent } from "./examples/default/default.component";
1717
import { MatInputModule } from "@angular/material/input";
1818
import { AllComponent } from "./examples/all/all.component";
19+
import { AllFormControlComponent } from "./examples/all-formcontrol/all-formcontrol.component";
20+
import { MatCheckboxModule } from "@angular/material/checkbox";
21+
import { MatSliderModule } from "@angular/material/slider";
1922

2023
@NgModule({
2124
declarations: [
2225
AppComponent,
2326
MinimalComponent,
2427
DefaultComponent,
2528
AllComponent,
29+
AllFormControlComponent,
2630
],
2731
imports: [
2832
BrowserModule.withServerTransition({ appId: "serverApp" }),
@@ -39,6 +43,8 @@ import { AllComponent } from "./examples/all/all.component";
3943
MarkdownModule.forRoot(),
4044
MatSelectCountryModule.forRoot("de"),
4145
MatInputModule,
46+
MatCheckboxModule,
47+
MatSliderModule,
4248
],
4349
providers: [],
4450
bootstrap: [AppComponent],

0 commit comments

Comments
 (0)