@if (quantity) {
  <div class="quantity-control-wrapper">
    <ui-spinner [show]="showSpinner">
      @if (!customInput) {
        <button class="current-quantity" type="button" [disabled]="disabled" [uiOverlayTrigger]="quantityControl">
          {{ quantity }}{{ suffix }}
          <ui-icon class="r90deg" size="14px" icon="arrow_head"></ui-icon>
        </button>
      }
    </ui-spinner>
    @if (customInput) {
      <input
        #quantity
        class="current-quantity"
        [(ngModel)]="quantityInputValue"
        type="number"
        [min]="minQuantity"
        [max]="range"
        placeholder="..."
        />
    }
    <ui-quantity-dropdown-content
      (quantityChange)="setQuantity($event); quantityControl.close()"
      (enableCustomInput)="enableCustomeInput()"
      [range]="range"
      [showTrash]="showTrash"
      yPosition="below"
      xPosition="after"
      #quantityControl
    ></ui-quantity-dropdown-content>
  </div>
}
@if (!!customInput) {
  <button
    class="action"
    [disabled]="!quantityInputValue || quantityInputValue < minQuantity || quantityInputValue > range"
    type="button"
    (click)="setQuantity(quantityInputValue)"
    >
    Aktualisieren
  </button>
}
