adapt my-select-checkbox placeholder to its context

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

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

client/src/app/+admin/users/user-list/user-list.component.html

@@ -61,6 +61,7 @@
                 name="columns"
                 [availableItems]="columns"
                 [selectableGroup]="false" [(ngModel)]="selectedColumns"
+                i18n-placeholder placeholder="Select columns"
               >
               </my-select-checkbox>
             </div>

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

@@ -2,7 +2,7 @@
   [items]="availableItems"
   [(ngModel)]="selectedItems"
   (ngModelChange)="onModelChange()"
-  i18n-placeholder placeholder="Add a new language"
+  [placeholder]="placeholder"
   [clearable]="true"
   [multiple]="true"
   [searchable]="true"

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

@@ -1,6 +1,7 @@
-import { Component, Input, forwardRef } from '@angular/core'
+import { Component, Input, forwardRef, OnInit } from '@angular/core'
 import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms'
 import { SelectOptionsItem } from './select-options.component'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 export type ItemSelectCheckboxValue = { id?: string | number, group?: string } | string
 
@@ -16,12 +17,21 @@ export type ItemSelectCheckboxValue = { id?: string | number, group?: string } |
     }
   ]
 })
-export class SelectCheckboxComponent implements ControlValueAccessor {
+export class SelectCheckboxComponent implements OnInit, ControlValueAccessor {
   @Input() availableItems: SelectOptionsItem[] = []
   @Input() selectedItems: ItemSelectCheckboxValue[] = []
   @Input() selectableGroup: boolean
   @Input() selectableGroupAsModel: boolean
   @Input() maxSelectedItems: number
+  @Input() placeholder: string
+
+  constructor (
+    private i18n: I18n
+  ) {}
+
+  ngOnInit () {
+    if (!this.placeholder) this.placeholder = this.i18n('Add a new option')
+  }
 
   propagateChange = (_: any) => { /* empty */ }
 

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

@@ -33,6 +33,7 @@
       <my-select-checkbox
         formControlName="videoLanguages" [availableItems]="languageItems"
         [selectableGroup]="true" [selectableGroupAsModel]="true"
+        i18n-placeholder placeholder="Add a new language"
       >
       </my-select-checkbox >
     </div>