<div class="select_container">
  <div class="select-label" *ngIf="dirty">
    {{ label
    }}<ng-container *ngIf="showrequired === true">
      *
    </ng-container>
  </div>
  <div (click)="toggleDropdown()" class="select-selected-text" [ngClass]="{ 'select-selected-text-active': isOpen, active: dirty }">
    <span
      >{{ selected }}
      <ng-container *ngIf="showrequired === true && !dirty">
        *
      </ng-container>
    </span>
    <img src="/assets/images/Arrow_Down_2.svg" alt="open select" class="open-icon" />
  </div>
  <div class="select-options" [ngClass]="{ visible: isOpen }">
    <ul [ngStyle]="{ 'max-height': maxheight, overflow: hasscroll }">
      <li *ngFor="let item of options; let i = index" (click)="onChange(item)" [ngClass]="{ 'display-item': i === 0 }">
        {{ item }}
        <img src="/assets/images/Arrow_Down_2.svg" alt="open select" class="open-icon" *ngIf="i === 0" />
      </li>
    </ul>
  </div>
</div>
<div *ngIf="error && errorMessage" class="invalid-feedback" [ngClass]="{ 'invalid-feedback-under': displayErrorUnder }">
  <div>{{ errorMessage }}</div>
</div>
<hr [ngClass]="{ error: error && errorMessage }" />
