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">
      @if (title) {
        <label class="form-label" [class.mb-md-0]="horizontal" [for]="inputId">{{title}}</label>
      }
      @if (removable) {
        <button type="button" 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" [class.is-invalid]="error">
          <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-template ng-option-tmp let-item="item">
                <span [title]="item[bindLabel]">{{item[bindLabel]}}</span>
            </ng-template>
          </ng-select>
          @if (allowCreateNew) {
            <button 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>
          }
          @if (showFilter) {
            <button 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>
        <div class="invalid-feedback">
          {{error}}
        </div>
        @if (hint) {
          <small class="form-text text-muted">{{hint}}</small>
        }
        @if (getSuggestions().length > 0) {
          <small>
            <span i18n>Suggestions:</span>&nbsp;
            @for (s of getSuggestions(); track s) {
              <a (click)="value = s.id; onChange(value)" [routerLink]="[]">{{s.name}}</a>&nbsp;
            }
          </small>
        }
      </div>
    </div>
  </div>