UI: Border error for toggle button

ui-ngx/src/app/shared/components/toggle-header.component.html

@@ -41,7 +41,7 @@
                            [name]="name"
                            [(ngModel)]="value"
                            (ngModelChange)="valueChange.emit(value)">
-    <mat-button-toggle *ngFor="let option of options; trackBy: trackByHeaderOption" [value]="option.value" [disabled]="disabled">
+    <mat-button-toggle *ngFor="let option of options; trackBy: trackByHeaderOption" [value]="option.value" [disabled]="disabled" [class.tb-toggle-button-error]="option.error && value !== option.value">
       {{ option.name }}
       <mat-icon matTooltipPosition="above"
                 matTooltipClass="tb-error-tooltip"

ui-ngx/src/app/shared/components/toggle-header.component.scss

@@ -85,6 +85,12 @@
         border-radius: 100px;
       }
     }
+    .tb-toggle-button-error {
+      .mat-button-toggle-button {
+        border: 1px solid rgb(221, 44, 0);
+        border-radius: 20px;
+      }
+    }
     .mat-button-toggle + .mat-button-toggle {
       border-left: none;
     }