<div class="dropdown-wrapper" *ngIf="showInput === false" clickOutside (clickOutside)="isOpen = false">
  <div class="dropdown_container">
    <div
      (click)="toggleDropdown()"
      class="dropdown-selected-text"
      id="drop_txt"
      [ngClass]="{ 'dropdown-selected-text-active': isOpen }"
      #selectedDiv
    >
      <span>{{ selected }}</span>
      <div [ngClass]="{ 'open-icon': !isOpen, 'close-icon': isOpen }" id="drop_img"></div>
    </div>
    <div [style.top.px]="top" [style.right.px]="right" class="dropdown-options" [ngClass]="{ visible: isOpen }">
      <ul>
        <li (click)="deleteItems()"><img src="assets/images/trash.svg" id="0" /></li>
        <li *ngFor="let item of options" (click)="onChange(item)" [ngClass]="{ selected: item === selected }" id="{{ item }}">
          {{ item === -1 ? '10+' : item }}
          <img src="assets/images/Arrow_Down_2.svg" *ngIf="item === selected" [ngStyle]="{ 'margin-left': '3px' }" />
        </li>
      </ul>
    </div>
  </div>
  <app-button (click)="onSwitch()">Ändern</app-button>
</div>
<div *ngIf="showInput === true" class="ten-plus">
  <input type="number" [(ngModel)]="inputValue" placeholder="..." #customInput autofocus />
  <app-button (click)="validateInput()">Aktualisieren</app-button>
</div>
