From f49e7c5c0bf2548368bbf401b93a5121b1b6f09d Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Thu, 14 Mar 2024 15:37:44 +0200
Subject: [PATCH] UI: Improved notification settings behavior

---
 ...otification-template-configuration.component.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.html b/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.html
index 8297985a16..21b660010d 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.html
@@ -30,7 +30,7 @@
   <section class="tb-form-panel tb-slide-toggle stroked"
            [formGroupName]="NotificationDeliveryMethod.WEB"
            *ngIf="templateConfigurationForm.get('WEB.enabled').value">
-    <mat-expansion-panel class="tb-settings" expanded>
+    <mat-expansion-panel class="tb-settings" [expanded]="templateConfigurationForm.get('WEB').invalid">
       <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
         <mat-panel-title class="template-tittle">
           <tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.WEB).icon }}</tb-icon>
@@ -83,7 +83,7 @@
   <section class="tb-form-panel tb-slide-toggle stroked"
            [formGroupName]="NotificationDeliveryMethod.MOBILE_APP"
            *ngIf="templateConfigurationForm.get('MOBILE_APP.enabled').value">
-    <mat-expansion-panel class="tb-settings" expanded>
+    <mat-expansion-panel class="tb-settings" [expanded]="templateConfigurationForm.get('MOBILE_APP').invalid">
       <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
         <mat-panel-title class="template-tittle">
           <tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.MOBILE_APP).icon }}</tb-icon>
@@ -148,7 +148,7 @@
   <section class="tb-form-panel tb-slide-toggle stroked"
            [formGroupName]="NotificationDeliveryMethod.SMS"
            *ngIf="templateConfigurationForm.get('SMS.enabled').value">
-    <mat-expansion-panel class="tb-settings" expanded>
+    <mat-expansion-panel class="tb-settings" [expanded]="templateConfigurationForm.get('SMS').invalid">
       <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
         <mat-panel-title class="template-tittle">
           <tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.SMS).icon }}</tb-icon>
@@ -180,7 +180,7 @@
   <section class="tb-form-panel tb-slide-toggle stroked"
            [formGroupName]="NotificationDeliveryMethod.EMAIL"
            *ngIf="templateConfigurationForm.get('EMAIL.enabled').value">
-    <mat-expansion-panel class="tb-settings" expanded>
+    <mat-expansion-panel class="tb-settings" [expanded]="templateConfigurationForm.get('EMAIL').invalid">
       <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
         <mat-panel-title class="template-tittle">
           <tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.EMAIL).icon }}</tb-icon>
@@ -210,7 +210,7 @@
   <section class="tb-form-panel tb-slide-toggle stroked"
            [formGroupName]="NotificationDeliveryMethod.SLACK"
            *ngIf="templateConfigurationForm.get('SLACK.enabled').value">
-    <mat-expansion-panel class="tb-settings" expanded>
+    <mat-expansion-panel class="tb-settings" [expanded]="templateConfigurationForm.get('SLACK').invalid">
       <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
         <mat-panel-title class="template-tittle">
           <tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.SLACK).icon }}</tb-icon>
@@ -236,7 +236,7 @@
   <section class="tb-form-panel tb-slide-toggle stroked"
            [formGroupName]="NotificationDeliveryMethod.MICROSOFT_TEAMS"
            *ngIf="templateConfigurationForm.get('MICROSOFT_TEAMS.enabled').value">
-    <mat-expansion-panel class="tb-settings" expanded>
+    <mat-expansion-panel class="tb-settings" [expanded]="templateConfigurationForm.get('MICROSOFT_TEAMS').invalid">
       <mat-expansion-panel-header fxLayout="row wrap" class="fill-width">
         <mat-panel-title class="template-tittle">
           <tb-icon>{{ NotificationDeliveryMethodInfoMap.get(NotificationDeliveryMethod.MICROSOFT_TEAMS).icon }}</tb-icon>