intervall filter lokalisiert

frontend/src/app/filter-dialog/filter-dialog.component.html

@@ -108,13 +108,12 @@
 
       <mat-expansion-panel>
         <mat-expansion-panel-header>
-          <mat-panel-title>Intervall<mat-badge *ngIf="IntervallEnabled" [matBadge]="''"
+          <mat-panel-title>{{this.languageService.lMap.get('filterDilogIntervalTitle')}}<mat-badge *ngIf="IntervallEnabled" [matBadge]="''"
               class="dot-badge"></mat-badge></mat-panel-title>
-          <mat-panel-description>Pakete mit Intervall > ein Jahr</mat-panel-description>
+          <mat-panel-description>{{this.languageService.lMap.get('filterDialogInterval')}}</mat-panel-description>
         </mat-expansion-panel-header>
 
-        <mat-checkbox (input)="this.IntervallEnabled = intervallFilter;" [(ngModel)]="intervallFilter">Zeige nur Pakete
+        <mat-checkbox (input)="this.IntervallEnabled = intervallFilter;" [(ngModel)]="intervallFilter">{{this.languageService.lMap.get('filterDialogIntervalCheck')}}</mat-checkbox>
-          mit Intervall > 1 Jahr!</mat-checkbox>
       </mat-expansion-panel>
     </mat-accordion>
 

frontend/src/app/language.service.ts

@@ -124,6 +124,7 @@ export class LanguageService {
     this.deMap.set('filterDilogPaketTypeText', 'einen oder mehrere, exakte Eingabe');
     this.deMap.set('filterDilogDate', 'Datum');
     this.deMap.set('filterDilogDateText', 'Geplantes Start-Datum: Von / Bis');
+    this.deMap.set('filterDilogIntervalTitle', 'Intervall');
 
     this.deMap.set('filterDilogSearchText', 'Text durchsuchen');
     this.deMap.set('filterDialogSearchSg', 'Supportgruppe suchen & auswählen');
@@ -134,17 +135,18 @@ export class LanguageService {
     this.deMap.set('filterDilogSearchTo', 'Bis');
 
     this.enMap.set('filterDialogShortDesc', 'Short description');
-    this.enMap.set('filterDialogShortDescText', 'entering a text part filters all matching packages');
+    this.enMap.set('filterDialogShortDescText', 'Entering a text part filters all matching packages');
     this.enMap.set('filterDilogSg', 'Support group');
-    this.enMap.set('filterDilogSgText', 'in the role of planning IH or cost manager (one)');
+    this.enMap.set('filterDilogSgText', 'In the role of planning IH or cost manager (one)');
     this.enMap.set('filterDilogState', 'State');
-    this.enMap.set('filterDilogStateText', '(one or more) of the package');
+    this.enMap.set('filterDilogStateText', '(One or more) of the package');
     this.enMap.set('filterDilogContract', 'Contract');
     this.enMap.set('filterDilogContractText', 'Contract / provider cluster (one or more)');
     this.enMap.set('filterDilogPaketType', 'Package type');
     this.enMap.set('filterDilogPaketTypeText', 'one or more, exact input');
     this.enMap.set('filterDilogDate', 'Date');
     this.enMap.set('filterDilogDateText', 'Planned start date: from / to');
+    this.enMap.set('filterDilogIntervalTitle', 'Interval');
 
     this.enMap.set('filterDilogSearchText', 'Text search');
     this.enMap.set('filterDialogSearchSg', 'Search & select support group');
@@ -154,6 +156,11 @@ export class LanguageService {
     this.enMap.set('filterDilogSearchFrom', 'From');
     this.enMap.set('filterDilogSearchTo', 'Until');
 
+    this.enMap.set('filterDialogInterval', 'Packages with interval > one year');
+    this.deMap.set('filterDialogInterval', 'Pakete mit Intervall > ein Jahr');
+    this.enMap.set('filterDialogIntervalCheck', 'Show only packages with interval > one year!');
+    this.deMap.set('filterDialogIntervalCheck', 'Zeige nur Pakete mit Intervall > ein Jahr!');
+
     this.enMap.set('filterDilogButton', 'Apply Filters');
     this.deMap.set('filterDilogButton', 'Filter anwenden');
     this.deMap.set('filterDialogCancel', 'Abbrechen');

frontend/src/app/multiselect-autocomplete/multiselect-autocomplete.component.css

@@ -16,3 +16,13 @@
 
   line-height: 1;
 }
+
+mat-chip {
+  display: flex;
+  align-items: center;
+  vertical-align: middle;
+  line-height: 1;
+}
+mat-icon {
+  vertical-align: middle;
+}

frontend/src/app/multiselect-autocomplete/multiselect-autocomplete.component.html

@@ -1,12 +1,12 @@
 <div class="chip-list-wrapper">
   <mat-chip-listbox #chipList>
     <ng-container *ngFor="let select of selectData | slice:0:20; let i =index">
-      <mat-chip class="cardinal-colors" (click)="removeChip(select)" style="background-color: #00a79d;">
+      <mat-chip (click)="removeChip(select)" style="background-color: #00a79d;">
         {{ select.item }}
         <mat-icon class="mat-chip-remove">cancel</mat-icon>
       </mat-chip>
     </ng-container>
-    <mat-chip *ngIf="selectData.length>20" class="cardinal-colors" style="background-color: #00a79d;">...
+    <mat-chip *ngIf="selectData.length>20">...
       {{selectData.length-20}} weitere
     </mat-chip>
   </mat-chip-listbox>