rename airwatch folder

my-workspace/projects/sae-lib/alert-box/alert-box.html

@@ -1,15 +1,16 @@
 <div class="alert is-{{alertKind}}">
-  @if (alertKind == "warning"){
+  @if (alertKind == "warning") {
     <i class="ri-triangle-line"></i>
   }
-  @if (alertKind == "danger"){
+  @if (alertKind == "danger") {
     <i class="ri-triangle-line"></i>
   }
-  @if (alertKind == "error"){
+  @if (alertKind == "error") {
     <i class="ri-triangle-line"></i>
   }
-  <slot name="main" [innerHTML]="message ">
+  <slot [innerHTML]="message " name="main">
 
   </slot>
+  <div (click)="onCloseClicked()" class="close-button button">x</div>
   <ng-content></ng-content>
 </div>

my-workspace/projects/sae-lib/alert-box/alert-box.stories.ts

@@ -1,7 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { AlertBox } from './alert-box';
-import { moduleMetadata } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
+import type {Meta, StoryObj} from '@storybook/angular';
+import {moduleMetadata} from '@storybook/angular';
+import {AlertBox} from './alert-box';
+import {CommonModule} from '@angular/common';
 
 const meta: Meta<AlertBox> = {
   title: 'Components/AlertBox',
@@ -35,55 +35,55 @@ export const Warning: Story = {
     _alertKind: 'warning'
   },
 };
-
-export const Success: Story = {
-  args: {
-    message: 'Opération réussie !',
-    _alertKind: 'success'
-  },
-};
-
-export const Info: Story = {
-  args: {
-    message: 'Information importante',
-    _alertKind: 'info'
-  },
-};
-
-export const Primary: Story = {
-  args: {
-    message: 'Message principal',
-    _alertKind: 'primary'
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    message: 'Message secondaire',
-    _alertKind: 'secondary'
-  },
-};
-
-export const Danger: Story = {
-  args: {
-    message: 'Attention danger !',
-    _alertKind: 'danger'
-  },
-};
-
-export const ErrorState: Story = {
-  args: {
-    message: 'Une erreur est survenue',
-    _alertKind: 'error'
-  },
-};
-
-export const WithContent: Story = {
-  args: {
-    _alertKind: 'warning'
-  },
-  render: (args) => ({
-    props: args,
-    template: `<sae-alert-box [_alertKind]="'warning'">Contenu personnalisé via ng-content</sae-alert-box>`
-  })
-};
+//
+// export const Success: Story = {
+//   args: {
+//     message: 'Opération réussie !',
+//     _alertKind: 'success'
+//   },
+// };
+//
+// export const Info: Story = {
+//   args: {
+//     message: 'Information importante',
+//     _alertKind: 'info'
+//   },
+// };
+//
+// export const Primary: Story = {
+//   args: {
+//     message: 'Message principal',
+//     _alertKind: 'primary'
+//   },
+// };
+//
+// export const Secondary: Story = {
+//   args: {
+//     message: 'Message secondaire',
+//     _alertKind: 'secondary'
+//   },
+// };
+//
+// export const Danger: Story = {
+//   args: {
+//     message: 'Attention danger !',
+//     _alertKind: 'danger'
+//   },
+// };
+//
+// export const ErrorState: Story = {
+//   args: {
+//     message: 'Une erreur est survenue',
+//     _alertKind: 'error'
+//   },
+// };
+//
+// export const WithContent: Story = {
+//   args: {
+//     _alertKind: 'warning'
+//   },
+//   render: (args) => ({
+//     props: args,
+//     template: `<sae-alert-box [_alertKind]="'warning'">Contenu personnalisé via ng-content</sae-alert-box>`
+//   })
+// };

my-workspace/projects/sae-lib/alert-box/alert-box.ts

@@ -1,14 +1,18 @@
-import {Component, Input} from '@angular/core';
+import {Component, ElementRef, Input} from '@angular/core';
+import {CommonModule} from '@angular/common';
 
 @Component({
   selector: 'sae-alert-box',
   standalone: true,
-  imports: [],
+  imports: [CommonModule],
   templateUrl: './alert-box.html',
   styleUrl: './alert-box.scss'
 })
 export class AlertBox {
-  @Input() public message  = "";
+  @Input() public message = "";
+
+  constructor(private host: ElementRef<HTMLElement>) {
+  }
 
   @Input() public _alertKind = "warning";
 
@@ -20,4 +24,10 @@ export class AlertBox {
     this._alertKind = value;
   }
 
+  // whatEver function name you want to give
+  onCloseClicked() {
+    this.host.nativeElement.remove();
+  }
+
+
 }

my-workspace/projects/sae-lib/package.json

@@ -12,6 +12,7 @@
     "shepherd.js": "^14.5.1"
   },
   "dependencies": {
+    "@storybook/angular": "^9.1.5",
     "tslib": "^2.3.0"
   },
   "sideEffects": false,