refactor(autocomplete): migrate to component bindings

Author: spliffone

api-goldens/element-ng/autocomplete/index.api.md

@@ -4,8 +4,8 @@
 
 ```ts
 
+import * as _angular_core from '@angular/core';
 import { Highlightable } from '@angular/cdk/a11y';
-import * as i0 from '@angular/core';
 import { OnInit } from '@angular/core';
 
 // @public (undocumented)
@@ -20,13 +20,13 @@ export class SiAutocompleteListboxDirective<T> implements OnInit {
     // (undocumented)
     get active(): SiAutocompleteOptionDirective<T> | null;
     // (undocumented)
-    readonly autocomplete: i0.InputSignal<SiAutocompleteDirective<T>>;
+    readonly autocomplete: _angular_core.InputSignal<SiAutocompleteDirective<T>>;
     // (undocumented)
-    readonly id: i0.InputSignal<string>;
+    readonly id: _angular_core.InputSignal<string>;
     // (undocumented)
-    readonly siAutocompleteDefaultIndex: i0.InputSignal<number>;
+    readonly siAutocompleteDefaultIndex: _angular_core.InputSignal<number>;
     // (undocumented)
-    readonly siAutocompleteOptionSubmitted: i0.OutputEmitterRef<T | undefined>;
+    readonly siAutocompleteOptionSubmitted: _angular_core.OutputEmitterRef<T | undefined>;
 }
 
 // @public (undocumented)
@@ -38,11 +38,11 @@ export class SiAutocompleteOptionDirective<T = unknown> implements Highlightable
     // (undocumented)
     get disabled(): boolean;
     // (undocumented)
-    readonly disabledInput: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly disabledInput: _angular_core.InputSignalWithTransform<boolean, unknown>;
     // (undocumented)
-    readonly id: i0.InputSignal<string>;
+    readonly id: _angular_core.InputSignal<string>;
     // (undocumented)
-    readonly value: i0.InputSignal<T | undefined>;
+    readonly value: _angular_core.InputSignal<T | undefined>;
 }
 
 // (No @packageDocumentation comment for this package)

projects/element-ng/autocomplete/si-autocomplete-option.directive.ts

@@ -3,15 +3,7 @@
  * SPDX-License-Identifier: MIT
  */
 import { Highlightable } from '@angular/cdk/a11y';
-import {
-  booleanAttribute,
-  Directive,
-  ElementRef,
-  HostBinding,
-  HostListener,
-  inject,
-  input
-} from '@angular/core';
+import { booleanAttribute, Directive, ElementRef, inject, input, signal } from '@angular/core';
 
 import { AUTOCOMPLETE_LISTBOX } from './si-autocomplete.model';
 
@@ -20,7 +12,9 @@ import { AUTOCOMPLETE_LISTBOX } from './si-autocomplete.model';
   host: {
     role: 'option',
     '[id]': 'id()',
-    '[attr.aria-disabled]': 'disabledInput()'
+    '[attr.aria-disabled]': 'disabledInput()',
+    '[class.active]': 'active()',
+    '(click)': 'click()'
   },
   exportAs: 'siAutocompleteOption'
 })
@@ -47,21 +41,20 @@ export class SiAutocompleteOptionDirective<T = unknown> implements Highlightable
   /** @defaultValue undefined */
   readonly value = input<T>(undefined, { alias: 'siAutocompleteOption' });
 
-  @HostBinding('class.active') protected active?: boolean;
+  protected readonly active = signal(false);
 
-  @HostListener('click')
   protected click(): void {
     this.parent.siAutocompleteOptionSubmitted.emit(this.value());
   }
 
   /** @internal */
   setActiveStyles(): void {
-    this.active = true;
+    this.active.set(true);
     this.element.nativeElement.scrollIntoView({ block: 'nearest' });
   }
 
   /** @internal */
   setInactiveStyles(): void {
-    this.active = false;
+    this.active.set(false);
   }
 }