Merged PR 1841: feat(ui-input-controls, oms-return-process): introduce text field container,...

feat(ui-input-controls, oms-return-process): introduce text field container, clear, and errors components

- Add `ui-text-field-container`, `ui-text-field-clear`, and `ui-text-field-errors` as standalone components for improved text field composition and error handling.
- Update SCSS to include new styles for container, clear, and errors components, ensuring visual consistency and error highlighting.
- Refactor `ReturnProcessProductQuestionComponent` to use the new containerized text field structure, improving template clarity and error display.
- Update Storybook story for `TextField` to demonstrate new composition and error handling.
- Export new components from the input-controls public API for external usage.

Ref: #4989, #5058

libs/shared/filter/src/lib/inputs/search-bar-input/search-bar-input.component.html

@@ -32,14 +32,13 @@
     }
   </ui-search-bar>
 
-  @if (canScan) {
-    <ui-icon-button
-      class="desktop:invisible"
-      type="submit"
-      [color]="'primary'"
-      [disabled]="control.invalid"
-      (click)="triggerSearch.emit()"
-      name="isaActionScanner"
-    ></ui-icon-button>
-  }
+  <ui-icon-button
+    *sharedScannerReady
+    class="desktop:invisible"
+    type="submit"
+    [color]="'primary'"
+    [disabled]="control.invalid"
+    (click)="triggerSearch.emit()"
+    name="isaActionScanner"
+  ></ui-icon-button>
 }

libs/shared/filter/src/lib/inputs/search-bar-input/search-bar-input.component.ts

@@ -15,12 +15,12 @@ import {
 } from '@isa/ui/search-bar';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { IconButtonColor, IconButtonComponent } from '@isa/ui/buttons';
-import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { provideIcons } from '@ng-icons/core';
 import { isaActionSearch, isaActionScanner } from '@isa/icons';
 import { FilterService, TextFilterInput } from '../../core';
 import { InputType } from '../../types';
-import { Platform } from '@angular/cdk/platform';
 import { toSignal } from '@angular/core/rxjs-interop';
+import { ScannerReadyDirective } from '@isa/core/scanner';
 
 @Component({
   selector: 'filter-search-bar-input',
@@ -32,9 +32,9 @@ import { toSignal } from '@angular/core/rxjs-interop';
   imports: [
     UiSearchBarComponent,
     IconButtonComponent,
-    NgIconComponent,
     ReactiveFormsModule,
     UiSearchBarClearComponent,
+    ScannerReadyDirective,
   ],
   host: {
     '[class]': "['filter-search-bar-input', appearanceClass()]",
@@ -43,7 +43,6 @@ import { toSignal } from '@angular/core/rxjs-interop';
 })
 export class SearchBarInputComponent {
   readonly filterService = inject(FilterService);
-  #platform = inject(Platform);
 
   control = new FormControl();
   valueChanges = toSignal(this.control.valueChanges);
@@ -52,8 +51,6 @@ export class SearchBarInputComponent {
   buttonColor = input<IconButtonColor>('brand');
   appearance = input<'main' | 'results'>('main');
 
-  canScan = this.#platform.ANDROID || this.#platform.IOS;
-
   appearanceClass = computed(
     () => `filter-search-bar-input__${this.appearance()}`,
   );