refactor(notification): card hides itself on close now

Also implement request event similar to dialog. If the request event is prevented, card will not be closed.

commitlint.config.cjs

@@ -1,35 +1,36 @@
 module.exports = {
-  extends: ['@commitlint/config-conventional'],
+  extends: ["@commitlint/config-conventional"],
   rules: {
-    'scope-enum': [
+    "scope-enum": [
       2,
-      'always',
+      "always",
       [
-        'storybook',
-        'design',
-        'react',
-        'deps',
-        'deps-dev',
+        "storybook",
+        "design",
+        "react",
+        "deps",
+        "deps-dev",
         // Components as scopes listed below
-        'button',
-        'icon',
-        'input',
-        'badge',
-        'tab',
-        'tooltip',
-        'progress-indicator',
-        'checkbox-group',
-        'checkbox',
-        'alert',
-        'select',
-        'pagination',
-        'radio',
-        'dialog',
-        'drawer',
-        'dropdown',
-        'switch',
-        'textarea',
-        'popover',
+        "button",
+        "icon",
+        "input",
+        "badge",
+        "tab",
+        "tooltip",
+        "progress-indicator",
+        "checkbox-group",
+        "checkbox",
+        "alert",
+        "select",
+        "pagination",
+        "radio",
+        "dialog",
+        "drawer",
+        "dropdown",
+        "switch",
+        "textarea",
+        "popover",
+        "notification",
       ],
     ],
   },

src/components/notification/bl-notification.ts

@@ -6,7 +6,7 @@ import BlAlert from "../alert/bl-alert";
 import { AlertVariant } from "../alert/bl-alert";
 import { BaklavaIcon } from "../icon/icon-list";
 import style from "./bl-notification.css";
-import BlNotificationCard from "./card/bl-notification-card";
+import BlNotificationCard, { CloseSource } from "./card/bl-notification-card";
 
 type Action = {
   label: string;
@@ -209,7 +209,12 @@ export default class BlNotification extends LitElement {
                 icon=${icon}
                 variant=${ifDefined(variant)}
                 ?permanent=${permanent}
-                @bl-notification-card-close=${() => {
+                @bl-notification-card-request-close=${(
+                  event: CustomEvent<{ source: CloseSource }>
+                ) => {
+                  // We will run animations on the notification card
+                  // so we need to prevent the default close behavior
+                  event.preventDefault();
                   this.removeNotification(id);
                 }}
                 @touchstart=${this.handleTouchStart}

src/components/notification/card/bl-notification-card.ts

@@ -7,9 +7,9 @@ import BlAlert, { AlertVariant } from "../../alert/bl-alert";
 import { BaklavaIcon } from "../../icon/icon-list";
 import style from "./bl-notification-card.css";
 
-export enum CloseType {
-  Auto = "auto",
-  Manual = "manual",
+export enum CloseSource {
+  DurationEnded = "duration-ended",
+  CloseButton = "close-button",
 }
 
 /**
@@ -72,22 +72,35 @@ export default class BlNotificationCard extends LitElement {
   @property({ type: Boolean })
   permanent = false;
 
+  /**
+   * Indicates whether the notification is closed.
+   */
+  @property({ type: Boolean })
+  closed = false;
+
+  /**
+   * Dispatches close request event.
+   * The notification will not be closed automatically if the event is prevented.
+   */
+  @event("bl-notification-card-request-close") private onRequestClose: EventDispatcher<{
+    source: "duration-ended" | "close-button";
+  }>;
+
   /**
    * Dispatches close event.
-   * The notification will not be closed automatically.
-   * Developer is responsible for not rendering the notification.
+   * The notification will hidden after the event is dispatched and the closed property is set to true.
    */
-  @event("bl-notification-card-close") private onClose: EventDispatcher<"auto" | "manual">;
-  // todo closetype breaks build
+  @event("bl-notification-card-close") private onClose: EventDispatcher<{
+    source: "duration-ended" | "close-button";
+  }>;
+
   protected firstUpdated() {
     this.setupDuration();
   }
 
   /**
    * Sets up duration animation.
    * The notification will dispatch a closed event after the animation ends.
-   * The notification will not be closed automatically.
-   * Developer is responsible for not rendering the notification.
    */
   private async setupDuration() {
     if (this.permanent) {
@@ -98,33 +111,31 @@ export default class BlNotificationCard extends LitElement {
       this.shadowRoot?.querySelector(".remaining")?.addEventListener(
         "animationend",
         () => {
-          this.close(CloseType.Auto);
+          this.close(CloseSource.DurationEnded);
         },
         { once: true }
       );
     });
   }
 
-  /**
-   * Closes the notification.
-   * @param {CloseType} closeType Type of the close event indicating whether it was closed automatically or manually.
-   */
-  private close(closeType: CloseType) {
-    this.onClose(closeType);
+  private close(source: CloseSource) {
+    const requestCloseEvent = this.onRequestClose({ source }, { cancelable: true });
+
+    console.log(requestCloseEvent);
+    if (requestCloseEvent.defaultPrevented) {
+      return;
+    }
+
+    this.onClose({ source });
+    this.closed = true;
   }
 
-  /**
-   * Handles close event on BlAlert.
-   * Prevents alert from closing and dispatches close event.
-   * @param {CustomEvent<boolean>} e Close event
-   */
   private handleClose(e: CustomEvent<boolean>) {
     const target = e.target as BlAlert;
 
-    // todo ?
     target.closed = false;
 
-    this.close(CloseType.Manual);
+    this.close(CloseSource.CloseButton);
   }
 
   private renderProgress() {
@@ -148,6 +159,7 @@ export default class BlNotificationCard extends LitElement {
         caption="${ifDefined(caption)}"
         icon=${icon}
         variant=${variant}
+        ?closed=${this.closed}
         ?closable=${true}
         @bl-close=${this.handleClose}
       >