/*!
* Copyright © 2005-2025 Hyland Software, Inc. and its affiliates. All rights reserved.
*
* Alfresco Example Content Application
*
* This file is part of the Alfresco Example Content Application.
* If the software was purchased under a paid Alfresco license, the terms of
* the paid license agreement will prevail. Otherwise, the software is
* provided under the following open source license terms:
*
* The Alfresco Example Content Application is free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* The Alfresco Example Content Application is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* from Hyland Software. If not, see .
*/
import {
Component,
EventEmitter,
Input,
Output,
ViewEncapsulation,
ViewChild,
ElementRef,
OnInit,
inject,
DestroyRef,
OnChanges,
SimpleChanges
} from '@angular/core';
import { CommonModule } from '@angular/common';
import { TranslatePipe } from '@ngx-translate/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { FormControl, FormsModule, ReactiveFormsModule, StatusChangeEvent, TouchedChangeEvent, Validators } from '@angular/forms';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { noWhitespaceValidator } from '@alfresco/aca-shared';
@Component({
imports: [CommonModule, TranslatePipe, MatButtonModule, MatIconModule, MatFormFieldModule, MatInputModule, FormsModule, ReactiveFormsModule],
selector: 'app-search-input-control',
templateUrl: './search-input-control.component.html',
styleUrls: ['./search-input-control.component.scss'],
encapsulation: ViewEncapsulation.None,
host: { class: 'app-search-control' }
})
export class SearchInputControlComponent implements OnInit, OnChanges {
private readonly destroyRef = inject(DestroyRef);
/** Type of the input field to render, e.g. "search" or "text" (default). */
@Input()
inputType = 'text';
/**
* Indicates whether the search is constrained by libraries.
* If true, specific error messaging or validation behavior may be triggered.
*/
@Input()
hasLibrariesConstraint = false;
/** Emitted when the search is submitted pressing ENTER button.
* The search term is provided as value of the event.
*/
@Output()
// eslint-disable-next-line @angular-eslint/no-output-native
submit: EventEmitter = new EventEmitter();
/** Emitted when the search term is changed. The search term is provided
* in the 'value' property of the returned object. If the term is less
* than three characters in length then the term is truncated to an empty
* string.
*/
@Output()
searchChange: EventEmitter = new EventEmitter();
/** Emitted when the input control has a validation error. */
@Output()
validationError = new EventEmitter();
@ViewChild('searchInput', { static: true })
searchInput: ElementRef;
searchFieldFormControl = new FormControl('', [Validators.required, noWhitespaceValidator()]);
get searchTerm(): string {
return this.searchFieldFormControl.value.replace('text:', 'TEXT:');
}
set searchTerm(value: string) {
this.searchFieldFormControl.setValue(value);
}
ngOnInit() {
this.searchFieldFormControl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((searchTermValue) => {
this.searchFieldFormControl.markAsTouched();
this.searchChange.emit(searchTermValue);
});
this.searchFieldFormControl.events.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
if (event instanceof TouchedChangeEvent || event instanceof StatusChangeEvent) {
if (this.searchFieldFormControl.touched) {
this.emitValidationError();
} else {
this.validationError.emit('');
}
}
});
}
ngOnChanges(changes: SimpleChanges): void {
if (changes['hasLibrariesConstraint'] && !changes['hasLibrariesConstraint'].firstChange) {
this.emitValidationError();
}
}
searchSubmit() {
this.searchFieldFormControl.markAsTouched();
const trimmedTerm = this.searchTerm?.trim();
if (this.searchFieldFormControl.valid && trimmedTerm) {
this.submit.emit(trimmedTerm);
}
}
clear() {
this.searchTerm = '';
this.searchChange.emit('');
}
onBlur() {
this.searchFieldFormControl.markAsUntouched();
}
isTermTooShort() {
return this.searchTerm.trim()?.length < 2;
}
emitValidationError(): void {
const errors = this.searchFieldFormControl.errors;
if (errors?.whitespace) {
this.validationError.emit('SEARCH.INPUT.WHITESPACE');
} else if (errors?.required) {
this.validationError.emit('SEARCH.INPUT.REQUIRED');
} else if (this.hasLibrariesConstraint && this.isTermTooShort()) {
this.validationError.emit('SEARCH.INPUT.MIN_LENGTH');
} else {
this.validationError.emit('');
}
}
}