From 082ee935559762788058618ac438afded4fe018f Mon Sep 17 00:00:00 2001 From: Antonino Bonanno Date: Tue, 16 Jan 2024 19:44:44 +0100 Subject: [PATCH] feat: split autocomple to another component Refs: #302 --- .../autocomplete/autocomplete.component.html | 44 +++++++ .../autocomplete.component.spec.ts | 21 +++ .../autocomplete/autocomplete.component.ts | 109 ++++++++++++++++ .../src/lib/components/form/form.module.ts | 9 +- .../form/input/input.component.html | 109 ++++++++-------- .../components/form/input/input.component.ts | 122 +++--------------- .../src/lib/interfaces/form.ts | 29 ++--- projects/design-angular-kit/src/public_api.ts | 7 +- .../form-autocomplete-example.component.html | 9 ++ ...orm-autocomplete-example.component.spec.ts | 21 +++ .../form-autocomplete-example.component.ts | 58 +++++++++ .../form-input-example.component.html | 50 ++++--- .../form-input-example.component.ts | 69 +--------- .../form-input-examples.component.tpl | 13 ++ src/app/form-input/form-input.module.ts | 4 +- 15 files changed, 405 insertions(+), 269 deletions(-) create mode 100644 projects/design-angular-kit/src/lib/components/form/autocomplete/autocomplete.component.html create mode 100644 projects/design-angular-kit/src/lib/components/form/autocomplete/autocomplete.component.spec.ts create mode 100644 projects/design-angular-kit/src/lib/components/form/autocomplete/autocomplete.component.ts create mode 100644 src/app/form-input/form-autocomplete-example/form-autocomplete-example.component.html create mode 100644 src/app/form-input/form-autocomplete-example/form-autocomplete-example.component.spec.ts create mode 100644 src/app/form-input/form-autocomplete-example/form-autocomplete-example.component.ts diff --git a/projects/design-angular-kit/src/lib/components/form/autocomplete/autocomplete.component.html b/projects/design-angular-kit/src/lib/components/form/autocomplete/autocomplete.component.html new file mode 100644 index 00000000..7ba8d750 --- /dev/null +++ b/projects/design-angular-kit/src/lib/components/form/autocomplete/autocomplete.component.html @@ -0,0 +1,44 @@ +
+ + + + + + + + + + + +
diff --git a/projects/design-angular-kit/src/lib/components/form/autocomplete/autocomplete.component.spec.ts b/projects/design-angular-kit/src/lib/components/form/autocomplete/autocomplete.component.spec.ts new file mode 100644 index 00000000..4e1becd9 --- /dev/null +++ b/projects/design-angular-kit/src/lib/components/form/autocomplete/autocomplete.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ItAutocompleteComponent } from './autocomplete.component'; + +describe('AutocompleteComponent', () => { + let component: ItAutocompleteComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [ItAutocompleteComponent], + }); + fixture = TestBed.createComponent(ItAutocompleteComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/design-angular-kit/src/lib/components/form/autocomplete/autocomplete.component.ts b/projects/design-angular-kit/src/lib/components/form/autocomplete/autocomplete.component.ts new file mode 100644 index 00000000..89399da4 --- /dev/null +++ b/projects/design-angular-kit/src/lib/components/form/autocomplete/autocomplete.component.ts @@ -0,0 +1,109 @@ +import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { ItAbstractFormComponent } from 'design-angular-kit/abstracts/abstract-form.component'; +import { AutocompleteItem } from 'design-angular-kit/interfaces/form'; +import { debounceTime, distinctUntilChanged, map, Observable, of, switchMap } from 'rxjs'; +import { AsyncPipe, NgForOf, NgIf, NgTemplateOutlet } from '@angular/common'; +import { ItIconComponent } from 'design-angular-kit/components/utils/icon/icon.component'; +import { MarkMatchingTextPipe } from 'design-angular-kit/pipes/mark-matching-text.pipe'; +import { ReactiveFormsModule } from '@angular/forms'; + +@Component({ + standalone: true, + selector: 'it-autocomplete[autocompleteData]', + templateUrl: './autocomplete.component.html', + imports: [AsyncPipe, ItIconComponent, MarkMatchingTextPipe, NgForOf, NgIf, NgTemplateOutlet, ReactiveFormsModule], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class ItAutocompleteComponent extends ItAbstractFormComponent implements OnInit { + /** + * Indicates the list of searchable elements on which to base the input autocomplete system + * If you need to retrieve items via API, can pass a function of Observable + * @default undefined + */ + @Input({ required: true }) autocompleteData!: Array | ((search?: string | null) => Observable>); + + /** + * Time span [ms] has passed without another source emission, to delay data filtering. + * Useful when the user is typing multiple letters + * @default 300 [ms] + */ + @Input() debounceTime = 300; + + /** + * The input placeholder + */ + @Input() placeholder = ''; + + /** + * Fired when the Autocomplete Item has been selected + */ + @Output() autocompleteSelectedEvent: EventEmitter = new EventEmitter(); + + protected showAutocompletion = false; + + /** Observable da cui vengono emessi i risultati dell'auto completamento */ + protected autocompleteResults$: Observable<{ + searchedValue: string | undefined | null; + relatedEntries: Array; + }> = new Observable(); + + override ngOnInit() { + super.ngOnInit(); + this.autocompleteResults$ = this.getAutocompleteResults$(); + } + + /** + * Create the autocomplete list + */ + private getAutocompleteResults$(): Observable<{ + searchedValue: string | null | undefined; + relatedEntries: Array; + }> { + return this.control.valueChanges.pipe( + debounceTime(this.debounceTime), // Delay filter data after time span has passed without another source emission, useful when the user is typing multiple letters + distinctUntilChanged(), // Only if searchValue is distinct in comparison to the last value + switchMap(searchedValue => { + if (!this.autocompleteData) { + return of({ + searchedValue, + relatedEntries: >[], + }); + } + + const autoCompleteData$ = Array.isArray(this.autocompleteData) ? of(this.autocompleteData) : this.autocompleteData(searchedValue); + return autoCompleteData$.pipe( + map(autocompleteData => { + if (!searchedValue || typeof searchedValue === 'number') { + return { searchedValue, relatedEntries: [] }; + } + + const lowercaseValue = searchedValue.toLowerCase(); + const relatedEntries = autocompleteData.filter(item => item.value?.toLowerCase().includes(lowercaseValue)); + + return { searchedValue, relatedEntries }; + }) + ); + }) + ); + } + + protected onEntryClick(entry: AutocompleteItem, event: Event) { + // Se non è stato definito un link associato all'elemento dell'autocomplete, probabilmente il desiderata + // non è effettuare la navigazione al default '#', pertanto in tal caso meglio annullare la navigazione. + if (!entry.link) { + event.preventDefault(); + } + + this.autocompleteSelectedEvent.next(entry); + this.control.setValue(entry.value); + this.showAutocompletion = false; + } + + protected autocompleteItemTrackByValueFn(index: number, item: AutocompleteItem) { + return item.value; + } + + protected onKeyDown() { + this.showAutocompletion = true; + } +} diff --git a/projects/design-angular-kit/src/lib/components/form/form.module.ts b/projects/design-angular-kit/src/lib/components/form/form.module.ts index 3bd2f95a..ba56fcf7 100644 --- a/projects/design-angular-kit/src/lib/components/form/form.module.ts +++ b/projects/design-angular-kit/src/lib/components/form/form.module.ts @@ -9,9 +9,10 @@ import { ItSelectComponent } from './select/select.component'; import { ItTextareaComponent } from './textarea/textarea.component'; import { ItUploadDragDropComponent } from './upload-drag-drop/upload-drag-drop.component'; import { ItUploadFileListComponent } from './upload-file-list/upload-file-list.component'; - +import { ItAutocompleteComponent } from './autocomplete/autocomplete.component'; const formComponents = [ + ItAutocompleteComponent, ItCheckboxComponent, ItInputComponent, ItPasswordInputComponent, @@ -21,11 +22,11 @@ const formComponents = [ ItSelectComponent, ItTextareaComponent, ItUploadDragDropComponent, - ItUploadFileListComponent + ItUploadFileListComponent, ]; @NgModule({ imports: formComponents, - exports: formComponents + exports: formComponents, }) -export class ItFormModule { } +export class ItFormModule {} diff --git a/projects/design-angular-kit/src/lib/components/form/input/input.component.html b/projects/design-angular-kit/src/lib/components/form/input/input.component.html index 5747ab1e..394f3eb0 100644 --- a/projects/design-angular-kit/src/lib/components/form/input/input.component.html +++ b/projects/design-angular-kit/src/lib/components/form/input/input.component.html @@ -1,7 +1,10 @@
- -
@@ -11,32 +14,60 @@
- + + + - {{symbol}} - {{ symbol }} + - + +
@@ -47,44 +78,12 @@
- {{description}} - - - - - - - - -
    -
  • - - - - -
    - -
    - - - - {{entry.label}} - -     -
    • -
- - - + {{ description }} -
\ No newline at end of file + diff --git a/projects/design-angular-kit/src/lib/components/form/input/input.component.ts b/projects/design-angular-kit/src/lib/components/form/input/input.component.ts index 027ef1b7..8203c117 100644 --- a/projects/design-angular-kit/src/lib/components/form/input/input.component.ts +++ b/projects/design-angular-kit/src/lib/components/form/input/input.component.ts @@ -1,14 +1,12 @@ -import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core'; import { ItAbstractFormComponent } from '../../../abstracts/abstract-form.component'; -import { AutocompleteItem, InputControlType } from '../../../interfaces/form'; +import { InputControlType } from '../../../interfaces/form'; import { AbstractControl, ReactiveFormsModule, ValidatorFn, Validators } from '@angular/forms'; import { ItValidators } from '../../../validators/it-validators'; import { BooleanInput, isTrueBooleanInput } from '../../../utils/boolean-input'; -import { debounceTime, distinctUntilChanged, map, Observable, of, switchMap } from 'rxjs'; -import { AsyncPipe, NgForOf, NgIf, NgTemplateOutlet } from '@angular/common'; +import { Observable } from 'rxjs'; +import { AsyncPipe, NgForOf, NgIf } from '@angular/common'; import { TranslateModule } from '@ngx-translate/core'; -import { ItIconComponent } from '../../utils/icon/icon.component'; -import { MarkMatchingTextPipe } from '../../../pipes/mark-matching-text.pipe'; @Component({ standalone: true, @@ -16,10 +14,9 @@ import { MarkMatchingTextPipe } from '../../../pipes/mark-matching-text.pipe'; templateUrl: './input.component.html', styleUrls: ['./input.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, - imports: [NgIf, ReactiveFormsModule, TranslateModule, AsyncPipe, ItIconComponent, MarkMatchingTextPipe, NgTemplateOutlet, NgForOf] + imports: [NgIf, ReactiveFormsModule, TranslateModule, AsyncPipe, NgForOf], }) export class ItInputComponent extends ItAbstractFormComponent implements OnInit { - /** * The input type * @default text @@ -29,7 +26,7 @@ export class ItInputComponent extends ItAbstractFormComponent | ((search?: string | number | null) => Observable>); - - /** - * Time span [ms] has passed without another source emission, to delay data filtering. - * Useful when the user is typing multiple letters - * @default 300 [ms] - */ - @Input() autocompleteDebounceTime: number = 300; - - /** - * Fired when the Autocomplete Item has been selected - */ - @Output() autocompleteSelectedEvent: EventEmitter = new EventEmitter(); - - protected showAutocompletion = false; - - get isActiveLabel(): boolean { const value = this.control.value; if ((!!value && value !== 0) || value === 0 || !!this.placeholder) { @@ -145,21 +120,25 @@ export class ItInputComponent extends ItAbstractFormComponent { if (this.hasError('min') && this.min) { return this._translateService.get('it.errors.min-invalid', { - min: this.min + min: this.min, }); } if (this.hasError('max') && this.max) { return this._translateService.get('it.errors.max-invalid', { - max: this.max + max: this.max, }); } if (this.hasError('minlength')) { const error = this.getError('minlength'); - return this._translateService.get('it.errors.min-length-invalid', { min: error.requiredLength }); + return this._translateService.get('it.errors.min-length-invalid', { + min: error.requiredLength, + }); } if (this.hasError('maxlength')) { const error = this.getError('maxlength'); - return this._translateService.get('it.errors.max-length-invalid', { max: error.requiredLength }); + return this._translateService.get('it.errors.max-length-invalid', { + max: error.requiredLength, + }); } if (this.hasError('email') || this.hasError('invalidEmail')) { return this._translateService.get('it.errors.email-invalid'); @@ -187,19 +166,14 @@ export class ItInputComponent extends ItAbstractFormComponent - }> = new Observable(); - - override ngOnInit() { super.ngOnInit(); @@ -212,8 +186,8 @@ export class ItInputComponent extends ItAbstractFormComponent this.min ? Validators.min(this.min)(control) : null); - validators.push((control: AbstractControl) => this.max ? Validators.max(this.max)(control) : null); + validators.push((control: AbstractControl) => (this.min ? Validators.min(this.min)(control) : null)); + validators.push((control: AbstractControl) => (this.max ? Validators.max(this.max)(control) : null)); break; case 'email': validators.push(ItValidators.email); @@ -227,18 +201,17 @@ export class ItInputComponent extends ItAbstractFormComponent }> { - if (this.type !== 'search') { - return of({ searchedValue: '', relatedEntries: [] }); - } - return this.control.valueChanges.pipe( - debounceTime(this.autocompleteDebounceTime), // Delay filter data after time span has passed without another source emission, useful when the user is typing multiple letters - distinctUntilChanged(), // Only if searchValue is distinct in comparison to the last value - switchMap(searchedValue => { - if (!this.autocompleteData) { - return of({ searchedValue, relatedEntries: >[] }); - } - - const autoCompleteData$ = Array.isArray(this.autocompleteData) ? of(this.autocompleteData) : this.autocompleteData(searchedValue); - return autoCompleteData$.pipe( - map(autocompleteData => { - if (!searchedValue || typeof searchedValue === 'number') { - return { searchedValue, relatedEntries: [] }; - } - - const lowercaseValue = searchedValue.toLowerCase(); - const relatedEntries = autocompleteData.filter(item => item.value?.toLowerCase().includes(lowercaseValue)); - - return { searchedValue, relatedEntries }; - }) - ); - }) - ); - } - - onEntryClick(entry: AutocompleteItem, event: Event) { - // Se non è stato definito un link associato all'elemento dell'autocomplete, probabilmente il desiderata - // non è effettuare la navigazione al default '#', pertanto in tal caso meglio annullare la navigazione. - if (!entry.link) { - event.preventDefault(); - } - - this.autocompleteSelectedEvent.next(entry); - this.control.setValue(entry.value); - this.showAutocompletion = false; - } - - autocompleteItemTrackByValueFn(index: number, item: AutocompleteItem) { - return item.value; - } - - onKeyDown() { - this.showAutocompletion = this.type === 'search'; - } } diff --git a/projects/design-angular-kit/src/lib/interfaces/form.ts b/projects/design-angular-kit/src/lib/interfaces/form.ts index 765254c8..0f22b823 100644 --- a/projects/design-angular-kit/src/lib/interfaces/form.ts +++ b/projects/design-angular-kit/src/lib/interfaces/form.ts @@ -1,30 +1,30 @@ import { IconName } from './icon'; -export type InputControlType = 'text' | 'email' | 'number' | 'date' | 'time' | 'tel' | 'color' | 'url' | 'search'; +export type InputControlType = 'text' | 'email' | 'number' | 'date' | 'time' | 'tel' | 'color' | 'url'; export interface SelectControlOption { - value: T, - text?: string, - selected?: boolean | ((value: T) => boolean), - disabled?: boolean | ((value: T) => boolean) + value: T; + text?: string; + selected?: boolean | ((value: T) => boolean); + disabled?: boolean | ((value: T) => boolean); } export interface SelectControlGroup { - label: string, - options: Array>, - dragdrop?: boolean + label: string; + options: Array>; + dragdrop?: boolean; } export interface UploadFileListItem { /** * The item id */ - id: number, + id: number; /** * The uploaded file */ - file: File, + file: File; /** * Show progress bar @@ -33,27 +33,26 @@ export interface UploadFileListItem { * - uploading: if value is between 0 and 100 (exclusive 0 < value < 100) * - success: if value is greater than 100 */ - progress?: number, + progress?: number; /** * Show the ability to delete item * @default false */ - removable?: boolean, + removable?: boolean; /** * Set the status of the item as 'error' */ - error?: boolean, + error?: boolean; /** * Add tooltip on file item name * @example It can be used to show the error message or additional information about the file */ - tooltip?: string + tooltip?: string; } - /** * Elemento disponibile per l'autocompletamento del it-form-input */ diff --git a/projects/design-angular-kit/src/public_api.ts b/projects/design-angular-kit/src/public_api.ts index e937a426..8d580836 100644 --- a/projects/design-angular-kit/src/public_api.ts +++ b/projects/design-angular-kit/src/public_api.ts @@ -57,12 +57,13 @@ export * from './lib/components/core/tab/tab-item/tab-item.component'; export * from './lib/components/core/table/table.component'; export * from './lib/components/core/tooltip/tooltip.directive'; -export * from './lib/components/core/avatar/avatar.directive' -export * from './lib/components/core/avatar/avatar-dropdown/avatar-dropdown.component' -export * from './lib/components/core/avatar/avatar-group/avatar-group.component' +export * from './lib/components/core/avatar/avatar.directive'; +export * from './lib/components/core/avatar/avatar-dropdown/avatar-dropdown.component'; +export * from './lib/components/core/avatar/avatar-group/avatar-group.component'; // Forms components export * from './lib/components/form/form.module'; +export * from './lib/components/form/autocomplete/autocomplete.component'; export * from './lib/components/form/checkbox/checkbox.component'; export * from './lib/components/form/input/input.component'; export * from './lib/components/form/password-input/password-input.component'; diff --git a/src/app/form-input/form-autocomplete-example/form-autocomplete-example.component.html b/src/app/form-input/form-autocomplete-example/form-autocomplete-example.component.html new file mode 100644 index 00000000..d6bae85a --- /dev/null +++ b/src/app/form-input/form-autocomplete-example/form-autocomplete-example.component.html @@ -0,0 +1,9 @@ +

Ricerca con autocompletamento e dati

+ +
+ +
diff --git a/src/app/form-input/form-autocomplete-example/form-autocomplete-example.component.spec.ts b/src/app/form-input/form-autocomplete-example/form-autocomplete-example.component.spec.ts new file mode 100644 index 00000000..1c48b67e --- /dev/null +++ b/src/app/form-input/form-autocomplete-example/form-autocomplete-example.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { FormAutocompleteExampleComponent } from './form-autocomplete-example.component'; + +describe('FormAutocompleteExampleComponent', () => { + let component: FormAutocompleteExampleComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [FormAutocompleteExampleComponent] + }); + fixture = TestBed.createComponent(FormAutocompleteExampleComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/form-input/form-autocomplete-example/form-autocomplete-example.component.ts b/src/app/form-input/form-autocomplete-example/form-autocomplete-example.component.ts new file mode 100644 index 00000000..0a7ce830 --- /dev/null +++ b/src/app/form-input/form-autocomplete-example/form-autocomplete-example.component.ts @@ -0,0 +1,58 @@ +import { Component } from '@angular/core'; +import { AutocompleteItem } from 'design-angular-kit/interfaces/form'; +import { Observable, of } from 'rxjs'; + +@Component({ + selector: 'it-form-autocomplete-example', + templateUrl: './form-autocomplete-example.component.html', +}) +export class FormAutocompleteExampleComponent { + private _autoCompleteData: AutocompleteItem[] = [ + { + value: 'Luisa Neri', + avatarSrcPath: 'https://randomuser.me/api/portraits/women/44.jpg', + avatarAltText: 'Luisa Neri', + label: 'Profilo', + }, + { + value: 'Cristian Borelli', + avatarSrcPath: 'https://randomuser.me/api/portraits/men/1.jpg', + avatarAltText: 'Cristian Borelli', + label: 'Profilo', + }, + { + value: 'Andrea Stagi', + avatarSrcPath: 'https://randomuser.me/api/portraits/men/2.jpg', + avatarAltText: 'Andrea Stagi', + label: 'Profilo', + }, + { + value: 'Comune di Firenze', + icon: 'pa', + link: 'https:www.comune.fi.it/', + label: 'Comune', + }, + { + value: 'Italia', + avatarSrcPath: 'https:raw.githubusercontent.com/lipis/flag-icons/main/flags/4x3/it.svg', + avatarAltText: 'Italia', + }, + ]; + + /** + * Dynamic AutocompleteData (API) accepted by it-input + * @param search the autocomplete input string + */ + autocompleteUsers$ = (search?: string): Observable> => { + if (!search) { + return of([]); + } + + // API request for retrieve data, use `search` to filter data + return of(this._autoCompleteData); + }; + + onAutocompleteSelected(item: AutocompleteItem): void { + console.log(item); + } +} diff --git a/src/app/form-input/form-input-example/form-input-example.component.html b/src/app/form-input/form-input-example/form-input-example.component.html index 85ba80c4..3adf4a05 100644 --- a/src/app/form-input/form-input-example/form-input-example.component.html +++ b/src/app/form-input/form-input-example/form-input-example.component.html @@ -4,24 +4,24 @@

Interazione con Form Input

- + - +
@@ -46,20 +46,18 @@
Tipo Input
- - + + +
- - + + + +
- diff --git a/src/app/form-input/form-input-example/form-input-example.component.ts b/src/app/form-input/form-input-example/form-input-example.component.ts index 386e1ce6..02b05572 100644 --- a/src/app/form-input/form-input-example/form-input-example.component.ts +++ b/src/app/form-input/form-input-example/form-input-example.component.ts @@ -1,18 +1,17 @@ -import { Component, ChangeDetectionStrategy } from '@angular/core'; -import { AutocompleteItem, InputControlType } from 'projects/design-angular-kit/src/public_api'; -import { Observable, of } from 'rxjs'; +import { ChangeDetectionStrategy, Component } from '@angular/core'; +import { InputControlType } from 'projects/design-angular-kit/src/public_api'; @Component({ selector: 'it-form-input-example', templateUrl: './form-input-example.component.html', styleUrls: ['./form-input-example.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush + changeDetection: ChangeDetectionStrategy.OnPush, }) export class FormInputExampleComponent { i = 0; readOnly = false; disabled = false; - type: InputControlType | 'password' = 'search'; + type: InputControlType | 'password' = 'text'; icon = 'pencil'; value = 'myNgModel'; @@ -21,7 +20,7 @@ export class FormInputExampleComponent { } get label() { - return this.hasLabel ? 'Label dell\'input' : ''; + return this.hasLabel ? "Label dell'input" : ''; } get note() { @@ -33,62 +32,4 @@ export class FormInputExampleComponent { hasLabel = true; hasNote = false; - - /** - * Static AutocompleteData accepted by it-input - */ - get autoCompleteData(): AutocompleteItem[] { - return this._autoCompleteData; - } - set autoCompleteData(value: AutocompleteItem[]) { - this._autoCompleteData = value; - } - private _autoCompleteData: AutocompleteItem[] = [ - { - value: 'Luisa Neri', - avatarSrcPath: 'https://randomuser.me/api/portraits/women/44.jpg', - avatarAltText: 'Luisa Neri', - label: 'Profilo' - }, - { - value: 'Cristian Borelli', - avatarSrcPath: 'https://randomuser.me/api/portraits/men/1.jpg', - avatarAltText: 'Cristian Borelli', - label: 'Profilo' - }, - { - value: 'Andrea Stagi', - avatarSrcPath: 'https://randomuser.me/api/portraits/men/2.jpg', - avatarAltText: 'Andrea Stagi', - label: 'Profilo' - }, - { - value: 'Comune di Firenze', - icon: 'pa', - link: 'https:www.comune.fi.it/', - label: 'Comune' - }, - { - value: 'Italia', - avatarSrcPath: 'https:raw.githubusercontent.com/lipis/flag-icons/main/flags/4x3/it.svg', - avatarAltText: 'Italia' - } - ]; - - /** - * Dynamic AutocompleteData (API) accepted by it-input - * @param search the autocomplete input string - */ - autocompleteUsers$ = (search?: string): Observable> => { - if (!search) { - return of([]); - } - - // API request for retrieve data, use `search` to filter data - return of(this._autoCompleteData); - } - - onAutocompleteSelected(item: AutocompleteItem): void { - console.log(item); - } } diff --git a/src/app/form-input/form-input-examples/form-input-examples.component.tpl b/src/app/form-input/form-input-examples/form-input-examples.component.tpl index 31061962..df64b42b 100644 --- a/src/app/form-input/form-input-examples/form-input-examples.component.tpl +++ b/src/app/form-input/form-input-examples/form-input-examples.component.tpl @@ -104,3 +104,16 @@ + + +{% set htmlAutocomplete %} + {% include "../form-autocomplete-example/form-autocomplete-example.component.html" %} +{% endset %} + +{% set typescriptAutocomplete %} + {% include "../form-autocomplete-example/form-autocomplete-example.component.ts" %} +{% endset %} + + + + diff --git a/src/app/form-input/form-input.module.ts b/src/app/form-input/form-input.module.ts index cea4dfc1..31fff779 100644 --- a/src/app/form-input/form-input.module.ts +++ b/src/app/form-input/form-input.module.ts @@ -14,6 +14,7 @@ import { ModelDrivenValidationExampleComponent } from './model-driven-validation import { FormInputIconExampleComponent } from './form-input-icon/form-input-icon.component'; import { FormInputNumberExampleComponent } from './form-input-number/form-input-number.component'; import { FormInputCalendarExampleComponent } from './form-input-calendar/form-input-calendar.component'; +import { FormAutocompleteExampleComponent } from './form-autocomplete-example/form-autocomplete-example.component'; @NgModule({ imports: [ @@ -31,7 +32,8 @@ import { FormInputCalendarExampleComponent } from './form-input-calendar/form-in TemplateDrivenValidationExampleComponent, ModelDrivenValidationExampleComponent, FormInputNumberExampleComponent, - FormInputCalendarExampleComponent + FormInputCalendarExampleComponent, + FormAutocompleteExampleComponent ] }) export class FormInputModule { }