[ACS-9374] Simplify HTML by handling error state in TypeScript

projects/aca-content/assets/i18n/en.json

@@ -574,7 +574,7 @@
           "FILES": "Files",
           "FOLDERS": "Folders",
           "LIBRARIES": "Libraries",
-          "HINT": "Search input must have at least 2 alphanumeric characters.",
+          "MIN_LENGTH": "Search input must have at least 2 alphanumeric characters.",
           "REQUIRED": "Search input is required.",
           "WHITESPACE": "Search input cannot be only whitespace."
         },

projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.ts

@@ -29,9 +29,9 @@ 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, Validators } from '@angular/forms';
+import { FormControl, FormsModule, ReactiveFormsModule, StatusChangeEvent, TouchedChangeEvent, Validators } from '@angular/forms';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { noWhitespaceValidator } from 'projects/aca-shared/src/lib/validators/no-whitespace.validator';
+import { noWhitespaceValidator } from '@alfresco/aca-shared';
 
 @Component({
   imports: [CommonModule, TranslatePipe, MatButtonModule, MatIconModule, MatFormFieldModule, MatInputModule, FormsModule, ReactiveFormsModule],
@@ -48,6 +48,13 @@ export class SearchInputControlComponent implements OnInit {
   @Input()
   inputType = 'text';
 
+  /**
+   * Indicates whether the search is constrained by libraries.
+   * If true, specific error messaging or validation behavior may be triggered.
+   */
+  @Input()
+  hasLibrariesConstraint: boolean;
+
   /** Emitted when the search is submitted pressing ENTER button.
    * The search term is provided as value of the event.
    */
@@ -63,6 +70,10 @@ export class SearchInputControlComponent implements OnInit {
   @Output()
   searchChange: EventEmitter<string> = new EventEmitter();
 
+  /** Emitted when the input control has a validation error. */
+  @Output()
+  validationError = new EventEmitter<string>();
+
   @ViewChild('searchInput', { static: true })
   searchInput: ElementRef;
 
@@ -81,6 +92,25 @@ export class SearchInputControlComponent implements OnInit {
       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) {
+          const errors = this.searchFieldFormControl.errors;
+          if (errors?.whitespace) {
+            this.validationError.emit('SEARCH.INPUT.WHITESPACE');
+          } else if (this.hasLibrariesConstraint) {
+            this.validationError.emit('SEARCH.INPUT.MIN_LENGTH');
+          } else if (errors?.required) {
+            this.validationError.emit('SEARCH.INPUT.REQUIRED');
+          } else {
+            this.validationError.emit('');
+          }
+        } else {
+          this.validationError.emit('');
+        }
+      }
+    });
   }
 
   openDropdown() {

projects/aca-content/src/lib/components/search/search-input/search-input.component.html

@@ -35,21 +35,11 @@
         (click)="$event.stopPropagation()"
         (submit)="onSearchSubmit($event)"
         (searchChange)="onSearchChange($event)"
+        (validationError)="error = $event"
+        [hasLibrariesConstraint]="hasLibrariesConstraint"
       />
-      <mat-error *ngIf="searchInputControl.searchFieldFormControl.touched" class="app-search-error">
-        <ng-container *ngIf="hasLibrariesConstraint; else checkRequired">
-          {{ 'SEARCH.INPUT.HINT' | translate }}
-        </ng-container>
-        <ng-template #checkRequired>
-          <ng-container *ngIf="searchInputControl.searchFieldFormControl.errors?.required; else checkWhitespace">
-            {{ 'SEARCH.INPUT.REQUIRED' | translate }}
-          </ng-container>
-        </ng-template>
-        <ng-template #checkWhitespace>
-          <ng-container *ngIf="searchInputControl.searchFieldFormControl.errors?.whitespace">
-            {{ 'SEARCH.INPUT.WHITESPACE' | translate }}
-          </ng-container>
-        </ng-template>
+      <mat-error *ngIf="error" class="app-search-error">
+        {{ error | translate }}
       </mat-error>
       <div id="search-options" class="app-search-options">
         <mat-checkbox *ngFor="let option of searchOptions"

projects/aca-content/src/lib/components/search/search-input/search-input.component.ts

@@ -74,6 +74,7 @@ export class SearchInputComponent implements OnInit, OnDestroy {
   hasLibrariesConstraint = false;
   searchOnChange: boolean;
   isTrimmedWordEmpty = false;
+  error = '';
 
   searchedWord: string = null;
   searchOptions: Array<SearchOptionModel> = [

projects/aca-shared/src/public-api.ts

@@ -40,6 +40,7 @@ export * from './lib/components/document-base-page/document-base-page.component'
 export * from './lib/components/document-base-page/document-base-page.service';
 export * from './lib/components/open-in-app/open-in-app.component';
 export * from './lib/constants';
+
 export * from './lib/directives/contextmenu/contextmenu.directive';
 export * from './lib/directives/pagination.directive';
 
@@ -60,5 +61,8 @@ export * from './lib/services/app-settings.service';
 export * from './lib/services/user-profile.service';
 export * from './lib/services/navigation-history.service';
 
-export * from './lib/utils/node.utils';
 export * from './lib/testing/lib-testing-module';
+
+export * from './lib/utils/node.utils';
+
+export * from './lib/validators/no-whitespace.validator';