paperless-ngx/src-ui/src/app/components/common/input/select/select.component.html

<div class="mb-3 paperless-input-select" [class.disabled]="disabled">
  <div class="row">
    <div class="d-flex align-items-center position-relative hidden-button-container" [class.col-md-3]="horizontal">
      <label *ngIf="title" class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
      <button type="button" *ngIf="removable" class="btn btn-sm btn-danger position-absolute left-0" (click)="removed.emit(this)">
        <svg class="sidebaricon" fill="currentColor">
          <use xlink:href="assets/bootstrap-icons.svg#x"/>
        </svg>&nbsp;<ng-container i18n>Remove</ng-container>
      </button>
    </div>
    <div [class.col-md-9]="horizontal">
      <div [class.input-group]="allowCreateNew || showFilter">
        <ng-select name="inputId" [(ngModel)]="value"
          [disabled]="disabled"
          [style.color]="textColor"
          [style.background]="backgroundColor"
          [class.private]="isPrivate"
          [clearable]="allowNull"
          [items]="items"
          [addTag]="allowCreateNew && addItemRef"
          addTagText="Add item"
          i18n-addTagText="Used for both types, correspondents, storage paths"
          [placeholder]="placeholder"
          [notFoundText]="notFoundText"
          [multiple]="multiple"
          [bindLabel]="bindLabel"
          bindValue="id"
          (change)="onChange(value)"
          (search)="onSearch($event)"
          (focus)="clearLastSearchTerm()"
          (clear)="clearLastSearchTerm()"
          (blur)="onBlur()">
        </ng-select>
        <button *ngIf="allowCreateNew" class="btn btn-outline-secondary" type="button" (click)="addItem()" [disabled]="disabled">
          <svg class="buttonicon" fill="currentColor">
            <use xlink:href="assets/bootstrap-icons.svg#plus" />
          </svg>
        </button>
        <button *ngIf="showFilter" class="btn btn-outline-secondary" type="button" (click)="onFilterDocuments()" [disabled]="isPrivate || this.value === null" title="{{ filterButtonTitle }}">
          <svg class="buttonicon" fill="currentColor">
            <use xlink:href="assets/bootstrap-icons.svg#filter" />
          </svg>
        </button>
      </div>
      <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
      <small *ngIf="getSuggestions().length > 0">
        <span i18n>Suggestions:</span>&nbsp;
        <ng-container *ngFor="let s of getSuggestions()">
          <a (click)="value = s.id; onChange(value)" [routerLink]="[]">{{s.name}}</a>&nbsp;
        </ng-container>
      </small>
    </div>
  </div>
</div>