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">
    @if (title || removable) {
      <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)">
            <i-bs  name="x" class="me-1"></i-bs><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"
          [searchFn]="searchFn"
          bindValue="id"
          [virtualScroll]="items?.length > 100"
          (change)="onChange(value)"
          (search)="onSearch($event)"
          (focus)="clearLastSearchTerm()"
          (clear)="clearLastSearchTerm()"
          (blur)="onBlur()">
          <ng-template ng-label-tmp let-item="item" let-clear="clear">
            @if (multiple && !disabled) {
              <span class="ng-value-icon left" role="button" tabindex="0" (click)="clear(item)" (keydown.enter)="clear(item)" aria-label="Remove item" i18n-aria-label>×</span>
            }
            <span class="ng-value-label" [title]="item[bindLabel]">
              @if (iconField && item[iconField]) {
                <i-bs class="me-2" [name]="item[iconField]"></i-bs>
              }
              {{item[bindLabel]}}
            </span>
          </ng-template>
          <ng-template ng-option-tmp let-item="item">
              @if (iconField && item[iconField]) {
                <i-bs class="me-2" [name]="item[iconField]"></i-bs>
              }
              <span [title]="item[bindLabel]">{{item[bindLabel]}}</span>
          </ng-template>
        </ng-select>
        @if (allowCreateNew && !hideAddButton) {
          <button class="btn btn-outline-secondary" type="button" (click)="addItem()" [disabled]="disabled" aria-label="Create new item" i18n-aria-label>
            <i-bs width="1.2em" height="1.2em" name="plus"></i-bs>
          </button>
        }
        @if (showFilter) {
          <button class="btn btn-outline-secondary" type="button" (click)="onFilterDocuments()" [disabled]="isPrivate || this.value === null" title="{{ filterButtonTitle }}">
            <i-bs width="1.2em" height="1.2em" name="filter"></i-bs>
          </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>