Enhancement: implement document link custom field (#4799)

src-ui/src/app/components/common/input/document-link/document-link.component.html

@@ -0,0 +1,50 @@
+<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>
+          <ng-select name="inputId" [(ngModel)]="selectedDocuments"
+            [disabled]="disabled"
+            [items]="foundDocuments$ | async"
+            placeholder="Search for documents"
+            [notFoundText]="notFoundText"
+            [multiple]="true"
+            bindValue="id"
+            [compareWith]="compareDocuments"
+            [trackByFn]="trackByFn"
+            [minTermLength]="2"
+            [loading]="loading"
+            [typeahead]="documentsInput$"
+            (change)="onChange(selectedDocuments)">
+                <ng-template ng-label-tmp let-document="item">
+                  <div class="d-flex align-items-center">
+                    <svg class="sidebaricon" fill="currentColor" xmlns="http://www.w3.org/2000/svg" (click)="unselect(document)">
+                      <use xlink:href="assets/bootstrap-icons.svg#x"/>
+                    </svg>
+                    <a routerLink="/documents/{{document.id}}" class="badge bg-light text-primary">
+                      <svg class="sidebaricon-sm me-1" fill="currentColor">
+                        <use xlink:href="assets/bootstrap-icons.svg#file-text"/>
+                      </svg><span>{{document.title}}</span>
+                    </a>
+                  </div>
+                </ng-template>
+                <ng-template ng-loadingspinner-tmp>
+                  <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
+                  <div class="visually-hidden" i18n>Loading...</div>
+                </ng-template>
+                <ng-template ng-option-tmp let-document="item" let-index="index" let-search="searchTerm">
+                  <div>{{document.title}} <small class="text-muted">({{document.created | customDate:'shortDate'}})</small></div>
+                </ng-template>
+          </ng-select>
+        </div>
+        <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
+      </div>
+    </div>
+  </div>