diff --git a/libs/ui/src/lib/tags-selector/tags-selector.component.ts b/libs/ui/src/lib/tags-selector/tags-selector.component.ts index 158dd70fd..8e5eab387 100644 --- a/libs/ui/src/lib/tags-selector/tags-selector.component.ts +++ b/libs/ui/src/lib/tags-selector/tags-selector.component.ts @@ -48,9 +48,9 @@ import { BehaviorSubject, Subject, takeUntil } from 'rxjs'; ], providers: [ { + multi: true, provide: NG_VALUE_ACCESSOR, - useExisting: GfTagsSelectorComponent, - multi: true + useExisting: GfTagsSelectorComponent } ], schemas: [CUSTOM_ELEMENTS_SCHEMA], @@ -59,7 +59,7 @@ import { BehaviorSubject, Subject, takeUntil } from 'rxjs'; templateUrl: 'tags-selector.component.html' }) export class GfTagsSelectorComponent - implements OnInit, OnChanges, OnDestroy, ControlValueAccessor + implements ControlValueAccessor, OnChanges, OnDestroy, OnInit { @Input() hasPermissionToCreateTag = false; @Input() readonly = false; @@ -75,7 +75,19 @@ export class GfTagsSelectorComponent public readonly tagInputControl = new FormControl(''); public readonly tagsSelected = signal([]); - private unsubscribeSubject = new Subject(); + private filterTags(query: string = ''): Tag[] { + const tags = this.tagsSelected() ?? []; + const tagIds = tags.map(({ id }) => { + return id; + }); + + return this.tagsAvailable.filter(({ id, name }) => { + return ( + !tagIds.includes(id) && name.toLowerCase().includes(query.toLowerCase()) + ); + }); + } + // eslint-disable-next-line @typescript-eslint/no-unused-vars private onChange = (_value: Tag[]): void => { // ControlValueAccessor onChange callback @@ -148,21 +160,15 @@ export class GfTagsSelectorComponent this.unsubscribeSubject.complete(); } - // ControlValueAccessor implementation - writeValue(value: Tag[]): void { - this.tagsSelected.set(value || []); - this.updateFilters(); - } - - registerOnChange(fn: (value: Tag[]) => void): void { + public registerOnChange(fn: (value: Tag[]) => void): void { this.onChange = fn; } - registerOnTouched(fn: () => void): void { + public registerOnTouched(fn: () => void): void { this.onTouched = fn; } - setDisabledState?(isDisabled: boolean): void { + public setDisabledState(isDisabled: boolean): void { if (isDisabled) { this.tagInputControl.disable(); } else { @@ -170,20 +176,14 @@ export class GfTagsSelectorComponent } } - private filterTags(query: string = ''): Tag[] { - const tags = this.tagsSelected() ?? []; - const tagIds = tags.map(({ id }) => { - return id; - }); - - return this.tagsAvailable.filter(({ id, name }) => { - return ( - !tagIds.includes(id) && name.toLowerCase().includes(query.toLowerCase()) - ); - }); - } - private updateFilters() { this.filteredOptions.next(this.filterTags()); } + + private unsubscribeSubject = new Subject(); + // ControlValueAccessor implementation + public writeValue(value: Tag[]): void { + this.tagsSelected.set(value || []); + this.updateFilters(); + } }