paperless-ngx/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.html

<div ngbDropdown #fieldDropdown="ngbDropdown" (openChange)="onOpenClose($event)" [popperOptions]="popperOptions" placement="bottom-end">
    <button class="btn btn-sm btn-outline-primary" id="customFieldsDropdown" [disabled]="disabled" ngbDropdownToggle>
      <i-bs name="ui-radios"></i-bs>
      <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Custom Fields</ng-container></div>
    </button>
    <div ngbDropdownMenu aria-labelledby="customFieldsDropdown" class="shadow custom-fields-dropdown">
        <div class="list-group list-group-flush" (keydown)="listKeyDown($event)">
            <div class="list-group-item">
                <div class="input-group input-group-sm">
                  <input class="form-control" type="text" [(ngModel)]="filterText" placeholder="Search fields" i18n-placeholder (keyup.enter)="listFilterEnter()" #listFilterTextInput>
                </div>
            </div>
            @for (field of filteredFields; track field.id) {
                <button class="list-group-item list-group-item-action bg-light" (click)="addField(field)" #button>
                    <small class="d-flex">{{field.name}} <small class="ms-auto text-muted">{{getDataTypeLabel(field.data_type)}}</small></small>
                </button>
            }
            @if (!filterText?.length || filteredFields.length === 0) {
                <button class="list-group-item list-group-item-action bg-light" (click)="createField(filterText)" [disabled]="!canCreateFields" #button>
                    <small>
                        <i-bs width=".9em" height=".9em" name="asterisk"></i-bs>&nbsp;<ng-container i18n>Create new field</ng-container>
                    </small>
                </button>
            }
        </div>
    </div>
</div>