Chore: update ng-select to v24, handle breaking changes (#13951)

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

@@ -33,6 +33,7 @@
     [compareWith]="compareDocuments"
     [trackByFn]="trackByFn"
     [minTermLength]="2"
+    [appendTo]="appendTo"
     [loading]="loading()"
     [typeahead]="documentsInput$"
     (mousedown)="$event.stopImmediatePropagation()"

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

@@ -81,6 +81,12 @@ export class DocumentLinkComponent
   @Input()
   placeholder: string = $localize`Search for documents`
 
+  /**
+   * Parent for ng-select dropdown, needed to prevent close on click.
+   */
+  @Input()
+  appendTo: string = null
+
   get selectedDocumentIDs(): number[] {
     return this.selectedDocuments.map((d) => d.id)
   }

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

@@ -22,7 +22,7 @@
 }
 
 // Dropdown hierarchy reveal for ng-select options
-:host ::ng-deep .ng-dropdown-panel .ng-option {
+::ng-deep .ng-dropdown-panel .ng-option {
   overflow-x: auto !important;
 
   .tag-option-row {
@@ -41,12 +41,12 @@
   }
 }
 
-:host ::ng-deep .ng-dropdown-panel .ng-option:hover .hierarchy-reveal,
-:host ::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked .hierarchy-reveal {
+::ng-deep .ng-dropdown-panel .ng-option:hover .hierarchy-reveal,
+::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked .hierarchy-reveal {
   max-width: 1000px;
 }
 
 ::ng-deep .ng-dropdown-panel .ng-option:hover .hierarchy-indicator,
-:host ::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked .hierarchy-indicator {
+::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked .hierarchy-indicator {
   background: transparent;
 }