From 744097ad29b57ae8ee5c634cfb6f525a7c0d13e7 Mon Sep 17 00:00:00 2001
From: cmoinier <cmoinier@wrk208.wrk.prs.camptocamp.com>
Date: Tue, 4 Mar 2025 16:18:51 +0100
Subject: [PATCH] feat: changes to appBanner component

---
 .../application-banner.component.html            |  5 ++++-
 .../application-banner.component.ts              | 16 +++++++++++-----
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/libs/ui/elements/src/lib/application-banner/application-banner.component.html b/libs/ui/elements/src/lib/application-banner/application-banner.component.html
index 6a7d8c6bd..04f688075 100644
--- a/libs/ui/elements/src/lib/application-banner/application-banner.component.html
+++ b/libs/ui/elements/src/lib/application-banner/application-banner.component.html
@@ -1,4 +1,7 @@
-<div *ngIf="message" style="top: 0" class="absolute text-wrap bg-white mt-4">
+<div
+  *ngIf="message && bannerOpen"
+  class="absolute top-0 text-wrap bg-white mt-4"
+>
   <div
     class="flex flex-row py-2.5 px-5 gap-5 justify-start items-center border"
     [ngClass]="classList"
diff --git a/libs/ui/elements/src/lib/application-banner/application-banner.component.ts b/libs/ui/elements/src/lib/application-banner/application-banner.component.ts
index 1044f0f40..8a4c4640a 100644
--- a/libs/ui/elements/src/lib/application-banner/application-banner.component.ts
+++ b/libs/ui/elements/src/lib/application-banner/application-banner.component.ts
@@ -7,8 +7,10 @@ import {
 } from '@ng-icons/core'
 import {
   matCloseOutline,
+  matInfoOutline,
   matWarningAmberOutline,
 } from '@ng-icons/material-icons/outline'
+import { matWarning } from '@ng-icons/material-icons/baseline'
 
 @Component({
   selector: 'gn-ui-application-banner',
@@ -20,7 +22,9 @@ import {
   providers: [
     provideIcons({
       matWarningAmberOutline,
+      matInfoOutline,
       matCloseOutline,
+      matWarning,
     }),
     provideNgIconsConfig({ size: '1.5em' }),
   ],
@@ -30,23 +34,25 @@ export class ApplicationBannerComponent {
   @Input() title: string
   @Input() closeEnabled = false
   @Input() extraClass = ''
-  @Input() icon = 'matWarningAmberOutline'
+  @Input() icon = ''
   msgClass = ''
+  bannerOpen = true
 
   @Input() set type(value: 'primary' | 'secondary' | 'light') {
     switch (value) {
       case 'primary':
         this.msgClass = 'bg-primary-darkest border-primary text-white'
-        break
-      case 'secondary':
-        this.msgClass = 'bg-primary-opacity-50 border-primary-darker text-black'
+        this.icon = 'matWarning'
         break
       case 'light':
         this.msgClass =
           'bg-primary-opacity-10 border-primary-lightest text-black'
+        this.icon = 'matInfoOutline'
         break
+      case 'secondary':
       default:
         this.msgClass = 'bg-primary-opacity-50 border-primary-darker text-black'
+        this.icon = 'matWarningAmberOutline'
         break
     }
   }
@@ -56,6 +62,6 @@ export class ApplicationBannerComponent {
   }
 
   closeMessage() {
-    this.message = ''
+    this.bannerOpen = false
   }
 }