import {
  ChangeDetectionStrategy,
  Component,
  computed,
  inject,
} from '@angular/core';
import { TextFieldComponent } from './text-field.component';
import { provideIcons } from '@ng-icons/core';
import { isaActionClose } from '@isa/icons';
import { IconButtonComponent } from '@isa/ui/buttons';

@Component({
  selector: 'ui-text-field-clear',
  templateUrl: './text-field-clear.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  host: {
    '[class]': '["ui-text-field-clear", sizeClass()]',
  },
  providers: [provideIcons({ isaActionClose })],
  imports: [IconButtonComponent],
})
export class TextFieldClearComponent {
  hostComponent = inject(TextFieldComponent, { host: true });

  size = this.hostComponent.size;

  sizeClass = computed(() => {
    return `ui-text-field-clear__${this.size()}`;
  });
}
