Fix ng-select labels

client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html

@@ -76,7 +76,7 @@
 
           <div>
             <my-select-checkbox
-              id="instanceCategories"
+              labelForId="instanceCategories"
               formControlName="categories" [availableItems]="categoryItems"
               [selectableGroup]="false"
               i18n-placeholder placeholder="Add a new category"
@@ -90,7 +90,7 @@
 
           <div>
             <my-select-checkbox
-              id="instanceLanguages"
+              labelForId="instanceLanguages"
               formControlName="languages" [availableItems]="languageItems"
               [selectableGroup]="false"
               i18n-placeholder placeholder="Add a new language"

client/src/app/shared/shared-forms/select/select-categories.component.html

@@ -1,4 +1,5 @@
 <my-select-checkbox-all
+  [labelForId]="labelForId"
   [(ngModel)]="selectedCategories"
   (ngModelChange)="onModelChange()"
   [availableItems]="availableCategories"

client/src/app/shared/shared-forms/select/select-categories.component.ts

@@ -1,4 +1,4 @@
-import { Component, forwardRef, OnInit } from '@angular/core'
+import { Component, forwardRef, Input, OnInit } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms'
 import { ServerService } from '@app/core'
 import { SelectOptionsItem } from '../../../../types/select-options-item.model'
@@ -20,6 +20,8 @@ import { SelectCheckboxAllComponent } from './select-checkbox-all.component'
   imports: [ SelectCheckboxAllComponent, FormsModule ]
 })
 export class SelectCategoriesComponent implements ControlValueAccessor, OnInit {
+  @Input({ required: true }) labelForId: string
+
   selectedCategories: ItemSelectCheckboxValue[] = []
   availableCategories: SelectOptionsItem[] = []
 

client/src/app/shared/shared-forms/select/select-checkbox-all.component.ts

@@ -15,6 +15,7 @@ import { ItemSelectCheckboxValue, SelectCheckboxComponent } from './select-check
     [availableItems]="availableItems"
     [selectableGroup]="true" [selectableGroupAsModel]="true"
     [placeholder]="placeholder"
+    [labelForId]="labelForId"
     (focusout)="onBlur()"
   >
   </my-select-checkbox>`,
@@ -29,6 +30,7 @@ import { ItemSelectCheckboxValue, SelectCheckboxComponent } from './select-check
   imports: [ SelectCheckboxComponent, FormsModule ]
 })
 export class SelectCheckboxAllComponent implements ControlValueAccessor {
+  @Input({ required: true }) labelForId: string
   @Input() availableItems: SelectOptionsItem[] = []
   @Input() allGroupLabel: string
 

client/src/app/shared/shared-forms/select/select-checkbox.component.ts

@@ -20,6 +20,7 @@ export type ItemSelectCheckboxValue = { id?: string, group?: string } | string
   imports: [ NgSelectModule, FormsModule ]
 })
 export class SelectCheckboxComponent implements OnInit, ControlValueAccessor {
+  @Input({ required: true }) labelForId: string
   @Input() availableItems: SelectOptionsItem[] = []
   @Input() selectedItems: ItemSelectCheckboxValue[] = []
   @Input() selectableGroup: boolean

client/src/app/shared/shared-forms/select/select-languages.component.html

@@ -5,5 +5,6 @@
   [maxItems]="maxLanguages"
   i18n-placeholder placeholder="Add a new language"
   [allGroupLabel]="allLanguagesGroup"
+  [labelForId]="labelForId"
 >
 </my-select-checkbox-all>

client/src/app/shared/shared-forms/select/select-languages.component.ts

@@ -20,6 +20,7 @@ import { SelectCheckboxAllComponent } from './select-checkbox-all.component'
   imports: [ SelectCheckboxAllComponent, FormsModule ]
 })
 export class SelectLanguagesComponent implements ControlValueAccessor, OnInit {
+  @Input({ required: true }) labelForId: string
   @Input() maxLanguages: number
 
   selectedLanguages: ItemSelectCheckboxValue[]

client/src/app/shared/shared-user-settings/user-video-settings.component.html

@@ -30,7 +30,7 @@
     </my-help>
 
     <div>
-      <my-select-languages [maxLanguages]="20" formControlName="videoLanguages"></my-select-languages>
+      <my-select-languages labelForId="videoLanguages" [maxLanguages]="20" formControlName="videoLanguages"></my-select-languages>
     </div>
   </div>
 

client/src/app/shared/shared-video-miniature/video-filters-header.component.html

@@ -80,7 +80,7 @@
         <label class="with-description" for="languageOneOf" i18n>Languages:</label>
         <ng-template *ngTemplateOutlet="updateSettings; context: { $implicit: 'video-languages-subtitles' }"></ng-template>
 
-        <my-select-languages [maxLanguages]="20" formControlName="languageOneOf"></my-select-languages>
+        <my-select-languages labelForId="languageOneOf" [maxLanguages]="20" formControlName="languageOneOf"></my-select-languages>
       </div>
 
       <div class="form-group" role="radiogroup">
@@ -134,7 +134,7 @@
       <div class="form-group">
         <label for="categoryOneOf" i18n>Categories:</label>
 
-        <my-select-categories formControlName="categoryOneOf"></my-select-categories>
+        <my-select-categories labelForId="categoryOneOf" formControlName="categoryOneOf"></my-select-categories>
       </div>
 
       <div class="form-group" *ngIf="canSeeAllVideos()">