Feature: Implement custom fields for documents (#4502)

Adds custom fields of certain data types, attachable to documents and searchable

Co-Authored-By: Trenton H <797416+stumpylog@users.noreply.github.com>

src-ui/src/app/components/common/input/abstract-input.ts

@@ -1,4 +1,12 @@
-import { Directive, ElementRef, Input, OnInit, ViewChild } from '@angular/core'
+import {
+  Directive,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  ViewChild,
+} from '@angular/core'
 import { ControlValueAccessor } from '@angular/forms'
 import { v4 as uuidv4 } from 'uuid'
 
@@ -41,6 +49,18 @@ export class AbstractInputComponent<T> implements OnInit, ControlValueAccessor {
   @Input()
   error: string
 
+  @Input()
+  hint: string
+
+  @Input()
+  horizontal: boolean = false
+
+  @Input()
+  removable: boolean = false
+
+  @Output()
+  removed: EventEmitter<AbstractInputComponent<any>> = new EventEmitter()
+
   value: T
 
   ngOnInit(): void {
@@ -48,7 +68,4 @@ export class AbstractInputComponent<T> implements OnInit, ControlValueAccessor {
   }
 
   inputId: string
-
-  @Input()
-  hint: string
 }

src-ui/src/app/components/common/input/check/check.component.html

@@ -1,5 +1,19 @@
-<div class="mb-3 form-check">
-  <input #inputField type="checkbox" class="form-check-input" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" (blur)="onTouched()" [disabled]="disabled">
-  <label class="form-check-label" [for]="inputId">{{title}}</label>
-  <div *ngIf="hint" class="form-text text-muted">{{hint}}</div>
+<div class="mb-3">
+  <div class="row">
+    <div *ngIf="horizontal" class="d-flex align-items-center position-relative hidden-button-container col-md-3">
+      <label class="form-label mb-md-0" [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 [ngClass]="{'col-md-9': horizontal, 'align-items-center': horizontal, 'd-flex': horizontal}">
+      <div class="form-check">
+        <input #inputField type="checkbox" class="form-check-input" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" (blur)="onTouched()" [disabled]="disabled">
+        <label *ngIf="!horizontal" class="form-check-label" [for]="inputId">{{title}}</label>
+        <div *ngIf="hint" class="form-text text-muted">{{hint}}</div>
+      </div>
+    </div>
+  </div>
 </div>

src-ui/src/app/components/common/input/date/date.component.html

@@ -1,26 +1,37 @@
-<div class="mb-3">
-  <label class="form-label" [for]="inputId">{{title}}</label>
-  <div class="input-group" [class.is-invalid]="error">
-    <input #inputField class="form-control" [class.is-invalid]="error" [placeholder]="placeholder" [id]="inputId" maxlength="10"
-          (dateSelect)="onChange(value)" (change)="onChange(value)" (keypress)="onKeyPress($event)" (paste)="onPaste($event)"
-          name="dp" [(ngModel)]="value" ngbDatepicker #datePicker="ngbDatepicker" #datePickerContent="ngModel" [disabled]="disabled">
-    <button class="btn btn-outline-secondary calendar" (click)="datePicker.toggle()" type="button" [disabled]="disabled">
-      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
-        <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
-      </svg>
-    </button>
-    <button *ngIf="showFilter" class="btn btn-outline-secondary" type="button" (click)="onFilterDocuments()" [disabled]="this.value === null" title="{{ fitlerButtonTitle }}">
-      <svg class="buttonicon" fill="currentColor">
-        <use xlink:href="assets/bootstrap-icons.svg#filter" />
-      </svg>
-    </button>
+<div class="mb-3" [class.pb-3]="error">
+  <div class="row">
+    <div class="d-flex align-items-center position-relative hidden-button-container" [class.col-md-3]="horizontal">
+      <label class="form-label mb-md-0" [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="position-relative" [class.col-md-9]="horizontal">
+      <div class="input-group" [class.is-invalid]="error">
+        <input #inputField class="form-control" [class.is-invalid]="error" [placeholder]="placeholder" [id]="inputId" maxlength="10"
+              (dateSelect)="onChange(value)" (change)="onChange(value)" (keypress)="onKeyPress($event)" (paste)="onPaste($event)"
+              name="dp" [(ngModel)]="value" ngbDatepicker #datePicker="ngbDatepicker" #datePickerContent="ngModel" [disabled]="disabled">
+        <button class="btn btn-outline-secondary calendar" (click)="datePicker.toggle()" type="button" [disabled]="disabled">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="buttonicon">
+            <use _ngcontent-ng-c3750736003="" xlink:href="assets/bootstrap-icons.svg#calendar"></use>
+          </svg>
+        </button>
+        <button *ngIf="showFilter" class="btn btn-outline-secondary" type="button" (click)="onFilterDocuments()" [disabled]="this.value === null" title="{{ fitlerButtonTitle }}">
+          <svg class="buttonicon" fill="currentColor">
+            <use xlink:href="assets/bootstrap-icons.svg#filter" />
+          </svg>
+        </button>
+      </div>
+      <div class="invalid-feedback position-absolute top-100" i18n>Invalid date.</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)="onSuggestionClick(s)" [routerLink]="[]">{{s}}</a>&nbsp;
+        </ng-container>
+      </small>
+    </div>
   </div>
-  <div class="invalid-feedback" i18n>Invalid date.</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)="onSuggestionClick(s)" [routerLink]="[]">{{s}}</a>&nbsp;
-    </ng-container>
-  </small>
 </div>

src-ui/src/app/components/common/input/number/number.component.html

@@ -1,12 +1,22 @@
-<div class="mb-3">
-  <label class="form-label" [for]="inputId">{{title}}</label>
-  <div class="input-group" [class.is-invalid]="error">
-    <input #inputField type="number" class="form-control" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" [class.is-invalid]="error" [disabled]="disabled">
-    <button *ngIf="showAdd" class="btn btn-outline-secondary" type="button" id="button-addon1" (click)="nextAsn()" [disabled]="disabled">+1</button>
+<div class="mb-3" [class.pb-3]="error">
+  <div class="row">
+    <div class="d-flex align-items-center position-relative hidden-button-container" [class.col-md-3]="horizontal">
+      <label class="form-label mb-md-0" [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="position-relative" [class.col-md-9]="horizontal">
+      <div class="input-group" [class.is-invalid]="error">
+        <input #inputField type="number" class="form-control" [step]="step" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" [class.is-invalid]="error" [disabled]="disabled">
+        <button *ngIf="showAdd" class="btn btn-outline-secondary" type="button" id="button-addon1" (click)="nextAsn()" [disabled]="disabled">+1</button>
+      </div>
+      <div class="invalid-feedback position-absolute top-100">
+        {{error}}
+      </div>
+      <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
+    </div>
   </div>
-  <div class="invalid-feedback">
-    {{error}}
-  </div>
-  <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
-
 </div>

src-ui/src/app/components/common/input/number/number.component.spec.ts

@@ -46,4 +46,18 @@ describe('NumberComponent', () => {
     component.nextAsn()
     expect(component.value).toEqual(1002)
   })
+
+  it('should support float & monetary values', () => {
+    component.writeValue(11.13)
+    expect(component.value).toEqual(11)
+    component.step = 0.01
+    component.writeValue(11.1)
+    expect(component.value).toEqual('11.10')
+    component.step = 0.1
+    component.writeValue(12.3456)
+    expect(component.value).toEqual(12.3456)
+    // float (step = .1) doesnt force 2 decimals
+    component.writeValue(11.1)
+    expect(component.value).toEqual(11.1)
+  })
 })

src-ui/src/app/components/common/input/number/number.component.ts

@@ -19,6 +19,9 @@ export class NumberComponent extends AbstractInputComponent<number> {
   @Input()
   showAdd: boolean = true
 
+  @Input()
+  step: number = 1
+
   constructor(private documentService: DocumentService) {
     super()
   }
@@ -32,4 +35,10 @@ export class NumberComponent extends AbstractInputComponent<number> {
       this.onChange(this.value)
     })
   }
+
+  writeValue(newValue: any): void {
+    if (this.step === 1) newValue = parseInt(newValue, 10)
+    if (this.step === 0.01) newValue = parseFloat(newValue).toFixed(2)
+    super.writeValue(newValue)
+  }
 }

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

@@ -1,44 +1,54 @@
 <div class="mb-3 paperless-input-select" [class.disabled]="disabled">
-  <label *ngIf="title" class="form-label" [for]="inputId">{{title}}</label>
-    <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"
-        [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>
+  <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 mb-md-0" [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>
-  <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 [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>

src-ui/src/app/components/common/input/select/select.component.ts

@@ -88,6 +88,12 @@ export class SelectComponent extends AbstractInputComponent<number> {
   @Input()
   showFilter: boolean = false
 
+  @Input()
+  notFoundText: string = $localize`No items found`
+
+  @Input()
+  disableCreateNew: boolean = false
+
   @Output()
   createNew = new EventEmitter<string>()
 
@@ -99,7 +105,7 @@ export class SelectComponent extends AbstractInputComponent<number> {
   private _lastSearchTerm: string
 
   get allowCreateNew(): boolean {
-    return this.createNew.observers.length > 0
+    return !this.disableCreateNew && this.createNew.observers.length > 0
   }
 
   get isPrivate(): boolean {

src-ui/src/app/components/common/input/tags/tags.component.html

@@ -1,51 +1,53 @@
-<div class="mb-3 paperless-input-select paperless-input-tags" [class.disabled]="disabled">
-  <label class="form-label" for="tags" i18n>{{title}}</label>
+<div class="mb-3 paperless-input-select paperless-input-tags" [class.disabled]="disabled" [class.pb-3]="suggestions">
+  <div class="row">
+    <div class="d-flex align-items-center" [class.col-md-3]="horizontal">
+      <label class="form-label mb-md-0" for="tags" i18n>{{title}}</label>
+    </div>
+    <div class="position-relative" [class.col-md-9]="horizontal">
+      <div class="input-group flex-nowrap">
+        <ng-select #tagSelect name="tags" [items]="tags" bindLabel="name" bindValue="id" [(ngModel)]="value"
+          [disabled]="disabled"
+          [multiple]="true"
+          [closeOnSelect]="false"
+          [clearSearchOnAdd]="true"
+          [hideSelected]="tags.length > 0"
+          [addTag]="allowCreate ? createTagRef : false"
+          addTagText="Add tag"
+          i18n-addTagText
+          (change)="onChange(value)">
 
-  <div class="input-group flex-nowrap">
-    <ng-select #tagSelect name="tags" [items]="tags" bindLabel="name" bindValue="id" [(ngModel)]="value"
-      [disabled]="disabled"
-      [multiple]="true"
-      [closeOnSelect]="false"
-      [clearSearchOnAdd]="true"
-      [hideSelected]="tags.length > 0"
-      [addTag]="allowCreate ? createTagRef : false"
-      addTagText="Add tag"
-      i18n-addTagText
-      (change)="onChange(value)">
-
-      <ng-template ng-label-tmp let-item="item">
-        <span class="tag-wrap tag-wrap-delete" (mousedown)="removeTag($event, item.id)">
-          <svg width="1.2em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-            <use xlink:href="assets/bootstrap-icons.svg#x"/>
+          <ng-template ng-label-tmp let-item="item">
+            <span class="tag-wrap tag-wrap-delete" (mousedown)="removeTag($event, item.id)">
+              <svg width="1.2em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                <use xlink:href="assets/bootstrap-icons.svg#x"/>
+              </svg>
+              <pngx-tag *ngIf="item.id && tags" style="background-color: none;" [tag]="getTag(item.id)"></pngx-tag>
+            </span>
+          </ng-template>
+          <ng-template ng-option-tmp let-item="item" let-index="index" let-search="searchTerm">
+            <div class="tag-wrap">
+              <pngx-tag *ngIf="item.id && tags" class="me-2" [tag]="getTag(item.id)"></pngx-tag>
+            </div>
+          </ng-template>
+        </ng-select>
+        <button *ngIf="allowCreate" class="btn btn-outline-secondary" type="button" (click)="createTag()" [disabled]="disabled">
+          <svg class="buttonicon" fill="currentColor">
+            <use xlink:href="assets/bootstrap-icons.svg#plus" />
           </svg>
-          <pngx-tag *ngIf="item.id && tags" style="background-color: none;" [tag]="getTag(item.id)"></pngx-tag>
-        </span>
-      </ng-template>
-      <ng-template ng-option-tmp let-item="item" let-index="index" let-search="searchTerm">
-        <div class="tag-wrap">
-          <pngx-tag *ngIf="item.id && tags" class="me-2" [tag]="getTag(item.id)"></pngx-tag>
-        </div>
-      </ng-template>
-    </ng-select>
-    <button *ngIf="allowCreate" class="btn btn-outline-secondary" type="button" (click)="createTag()" [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]="hasPrivate || this.value === null" i18n-title title="Filter documents with these Tags">
-      <svg class="buttonicon" fill="currentColor">
-        <use xlink:href="assets/bootstrap-icons.svg#filter" />
-      </svg>
-    </button>
+        </button>
+        <button *ngIf="showFilter" class="btn btn-outline-secondary" type="button" (click)="onFilterDocuments()" [disabled]="hasPrivate || this.value === null" i18n-title title="Filter documents with these Tags">
+          <svg class="buttonicon" fill="currentColor">
+            <use xlink:href="assets/bootstrap-icons.svg#filter" />
+          </svg>
+        </button>
+      </div>
+      <small class="form-text text-muted" *ngIf="hint">{{hint}}</small>
+      <small *ngIf="getSuggestions().length > 0" class="position-absolute top-100">
+        <span i18n>Suggestions:</span>&nbsp;
+        <ng-container *ngFor="let tag of getSuggestions()">
+          <a (click)="addTag(tag.id)" [routerLink]="[]">{{tag?.name}}</a>&nbsp;
+        </ng-container>
+      </small>
+    </div>
   </div>
-  <small class="form-text text-muted" *ngIf="hint">{{hint}}</small>
-  <small *ngIf="getSuggestions().length > 0">
-    <span i18n>Suggestions:</span>&nbsp;
-    <ng-container *ngFor="let tag of getSuggestions()">
-      <a (click)="addTag(tag.id)" [routerLink]="[]">{{tag.name}}</a>&nbsp;
-    </ng-container>
-
-
-  </small>
-
 </div>

src-ui/src/app/components/common/input/tags/tags.component.ts

@@ -77,6 +77,9 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
   @Input()
   showFilter: boolean = false
 
+  @Input()
+  horizontal: boolean = false
+
   @Output()
   filterDocuments = new EventEmitter<PaperlessTag[]>()
 

src-ui/src/app/components/common/input/text/text.component.html

@@ -1,8 +1,19 @@
-<div class="mb-3">
-  <label class="form-label" [for]="inputId">{{title}}</label>
-  <input #inputField type="text" class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" [disabled]="disabled">
-  <small *ngIf="hint" class="form-text text-muted" [innerHTML]="hint | safeHtml"></small>
-  <div class="invalid-feedback">
-    {{error}}
+<div class="mb-3" [class.pb-3]="error">
+  <div class="row">
+    <div class="d-flex align-items-center position-relative hidden-button-container" [class.col-md-3]="horizontal">
+      <label class="form-label mb-md-0" [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="position-relative" [class.col-md-9]="horizontal">
+      <input #inputField type="text" class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" [disabled]="disabled">
+      <small *ngIf="hint" class="form-text text-muted" [innerHTML]="hint | safeHtml"></small>
+      <div class="invalid-feedback position-absolute top-100">
+        {{error}}
+      </div>
+    </div>
   </div>
 </div>

src-ui/src/app/components/common/input/url/url.component.html

@@ -0,0 +1,26 @@
+<div class="mb-3" [class.pb-3]="error">
+    <div class="row">
+      <div class="d-flex align-items-center position-relative hidden-button-container" [class.col-md-3]="horizontal">
+        <label class="form-label mb-md-0" [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" [class.is-invalid]="error">
+          <input #inputField type="url" class="form-control" [class.is-invalid]="error" placeholder="https://" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" [disabled]="disabled">
+          <a class="btn btn-outline-secondary rounded-end" title="Open link" i18n-title [href]="value" target="_blank">
+            <svg class="buttonicon mb-1" fill="currentColor">
+              <use xlink:href="assets/bootstrap-icons.svg#box-arrow-up-right" />
+            </svg>
+          </a>
+          <div class="invalid-feedback position-absolute top-100">
+            {{error}}
+          </div>
+        </div>
+        <small *ngIf="hint" class="form-text text-muted" [innerHTML]="hint | safeHtml"></small>
+      </div>
+    </div>
+  </div>

src-ui/src/app/components/common/input/url/url.component.spec.ts

@@ -0,0 +1,36 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import {
+  FormsModule,
+  ReactiveFormsModule,
+  NG_VALUE_ACCESSOR,
+} from '@angular/forms'
+import { UrlComponent } from './url.component'
+
+describe('TextComponent', () => {
+  let component: UrlComponent
+  let fixture: ComponentFixture<UrlComponent>
+  let input: HTMLInputElement
+
+  beforeEach(async () => {
+    TestBed.configureTestingModule({
+      declarations: [UrlComponent],
+      providers: [],
+      imports: [FormsModule, ReactiveFormsModule],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(UrlComponent)
+    fixture.debugElement.injector.get(NG_VALUE_ACCESSOR)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+    input = component.inputField.nativeElement
+  })
+
+  it('should support use of input field', () => {
+    expect(component.value).toBeUndefined()
+    // TODO: why doesnt this work?
+    // input.value = 'foo'
+    // input.dispatchEvent(new Event('change'))
+    // fixture.detectChanges()
+    // expect(component.value).toEqual('foo')
+  })
+})

src-ui/src/app/components/common/input/url/url.component.ts

@@ -0,0 +1,21 @@
+import { Component, forwardRef } from '@angular/core'
+import { NG_VALUE_ACCESSOR } from '@angular/forms'
+import { AbstractInputComponent } from '../abstract-input'
+
+@Component({
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => UrlComponent),
+      multi: true,
+    },
+  ],
+  selector: 'pngx-input-url',
+  templateUrl: './url.component.html',
+  styleUrls: ['./url.component.scss'],
+})
+export class UrlComponent extends AbstractInputComponent<string> {
+  constructor() {
+    super()
+  }
+}