refactor(select): migrate to component bindings

Author: spliffone

projects/element-ng/select/select-input/si-select-input.component.ts

@@ -7,7 +7,6 @@ import {
   ChangeDetectionStrategy,
   Component,
   computed,
-  HostListener,
   inject,
   input,
   output,
@@ -46,7 +45,14 @@ import { SelectOption } from '../si-select.types';
     '[attr.aria-disabled]': 'selectionStrategy.disabled()',
     '[attr.tabindex]': 'selectionStrategy.disabled() ? "-1" : "0"',
     '[class.disabled]': 'selectionStrategy.disabled()',
-    '[class.active]': 'open()'
+    '[class.active]': 'open()',
+    '(blur)': 'blur()',
+    '(click)': 'click($event)',
+    '(keydown.arrowDown)': 'click($event)',
+    '(keydown.alt.arrowDown)': 'click($event)',
+    '(keydown.arrowUp)': 'click($event)',
+    '(keydown.enter)': 'click($event)',
+    '(keydown.space)': 'click($event)'
   }
 })
 export class SiSelectInputComponent<T> {
@@ -85,19 +91,12 @@ export class SiSelectInputComponent<T> {
   protected readonly labeledBy = computed(() => `${this.baseId()}-aria-label ${this.labelledby()}`);
   protected readonly icons = addIcons({ elementDown2 });
 
-  @HostListener('blur')
   protected blur(): void {
     if (!this.open()) {
       this.selectionStrategy.onTouched();
     }
   }
 
-  @HostListener('click')
-  @HostListener('keydown.arrowDown', ['$event'])
-  @HostListener('keydown.alt.arrowDown', ['$event'])
-  @HostListener('keydown.arrowUp', ['$event'])
-  @HostListener('keydown.enter')
-  @HostListener('keydown.space')
   protected click(event?: Event): void {
     event?.preventDefault();
     this.openListbox.emit();

projects/element-ng/select/select-list/si-select-list.base.ts

@@ -6,8 +6,6 @@ import { ConfigurableFocusTrap, ConfigurableFocusTrapFactory } from '@angular/cd
 import {
   Directive,
   ElementRef,
-  HostBinding,
-  HostListener,
   inject,
   input,
   OnDestroy,
@@ -25,7 +23,9 @@ import { SelectGroup, SelectOption } from '../si-select.types';
 
 @Directive({
   host: {
-    class: 'dropdown-menu position-static w-100 py-4 d-flex flex-column'
+    class: 'dropdown-menu position-static w-100 py-4 d-flex flex-column',
+    '[class.si-multi-select]': 'multiSelect',
+    '(keydown.tab)': 'keydownTab()'
   }
 })
 export abstract class SiSelectListBase<T> implements OnInit, OnDestroy {
@@ -54,7 +54,6 @@ export abstract class SiSelectListBase<T> implements OnInit, OnDestroy {
   protected rows = this.selectOptions.rows;
   protected focusTrap!: ConfigurableFocusTrap;
 
-  @HostBinding('class.si-multi-select')
   protected multiSelect = this.selectionStrategy.allowMultiple;
 
   ngOnInit(): void {
@@ -65,7 +64,6 @@ export abstract class SiSelectListBase<T> implements OnInit, OnDestroy {
     this.focusTrap.destroy();
   }
 
-  @HostListener('keydown.tab')
   protected keydownTab(): void {
     // Ignore tab key if actions are displayed.
     if (!this.actionsTemplate()) {

projects/element-ng/select/si-select-action.directive.ts

@@ -2,14 +2,15 @@
  * Copyright (c) Siemens 2016 - 2026
  * SPDX-License-Identifier: MIT
  */
-import { booleanAttribute, Directive, HostListener, inject, input } from '@angular/core';
+import { booleanAttribute, Directive, inject, input } from '@angular/core';
 
 import { SiSelectComponent } from './si-select.component';
 
 @Directive({
   selector: '[siSelectAction]',
   host: {
-    class: 'mx-5 my-4'
+    class: 'mx-5 my-4',
+    '(click)': 'close()'
   },
   exportAs: 'si-select-action'
 })
@@ -21,7 +22,6 @@ export class SiSelectActionDirective {
    */
   readonly selectActionAutoClose = input(false, { transform: booleanAttribute });
 
-  @HostListener('click')
   protected close(): void {
     if (this.selectActionAutoClose()) {
       this.select.close();