feat: changes to appBanner component

geonetwork · Mar 4, 2025 · 744097a · 744097a
1 parent ee887d7
commit 744097a
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 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
@@ -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
@@ -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
   }
 }