@if (filter.label) {
    <mat-label [class.required]="isControlRequired()">{{ filter.label }}</mat-label>
}
<mat-form-field class="custom-label-outside custom-select-basic-state autocomplete-custom" appearance="outline" floatLabel="always">
    @if (filter.lucideIcon && !filterForm.value) {
        <lucide-angular
            [img]="filter.lucideIcon.iconSvg"
            [size]="filter.lucideIcon.size"
            [color]="filter.lucideIcon.color"
            [strokeWidth]="filter.lucideIcon.strokeWidth"
            [absoluteStrokeWidth]="filter.lucideIcon.absoluteStrokeWidth ?? false"
            [class]="filter.lucideIcon.class"
        ></lucide-angular>
    }
    <mat-select
        (selectionChange)="onChange($event)"
        [formControl]="filterForm"
        [multiple]="false"
        [placeholder]="filter.placeholder || ''"
    >
        @if (options && options.length > 0) {
            @for (option of options; track option) {
                <mat-option #optionsTemplate [value]="option.value">
                    <span class="d-flex align-items-center gap-3">
                        {{ option.label }}
                    </span>
                </mat-option>
            }
        } @else {
            <mat-option [value]="">No se encontraron opciones</mat-option>
        }
    </mat-select>

</mat-form-field>