fix(snackbar): handler for close button

Author: njfamirm

packages/snackbar/src/lib/element.ts

@@ -3,7 +3,7 @@ import {LightDomMixin, LoggerMixin} from '@nexim/element';
 import {html, LitElement, nothing, type PropertyValues, type TemplateResult} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
 
-import {snackbarActionButtonClickedSignal} from './signal.js';
+import {snackbarActionButtonClickedSignal, snackbarCloseButtonClickedSignal} from './signal.js';
 import {waitForNextFrame} from './utils.js';
 
 declare global {
@@ -46,6 +46,8 @@ export class SnackbarElement extends LightDomMixin(LoggerMixin(LitElement)) {
   /**
    * Close the snackbar and remove it from the DOM.
    * Waits for the closing animation to end before removing the element.
+   *
+   * @internal
    */
   async close(): Promise<void> {
     this.logger_.logMethod?.('close');
@@ -56,6 +58,16 @@ export class SnackbarElement extends LightDomMixin(LoggerMixin(LitElement)) {
     this.remove();
   }
 
+  /**
+   * Handle the close button click event.
+   * Sends a signal when the action button is clicked.
+   */
+  private closeButtonClickHandler__(): void {
+    this.logger_.logMethod?.('closeButtonClickHandler__');
+
+    snackbarCloseButtonClickedSignal.notify();
+  }
+
   /**
    * Handle the action button click event.
    * Sends a signal when the action button is clicked.
@@ -101,7 +113,7 @@ export class SnackbarElement extends LightDomMixin(LoggerMixin(LitElement)) {
     this.logger_.logMethod?.('renderCloseButton__');
 
     return html`
-      <button class="close-button" @click=${this.close.bind(this)}>
+      <button class="close-button" @click=${this.closeButtonClickHandler__.bind(this)}>
         <span class="alwatr-icon-font">close</span>
       </button>
     `;

packages/snackbar/src/lib/handler.ts

@@ -2,7 +2,7 @@ import {createLogger} from '@alwatr/logger';
 import {parseDuration} from '@alwatr/parse-duration';
 import {waitForTimeout} from '@alwatr/wait';
 
-import {snackbarActionButtonClickedSignal, snackbarSignal} from './signal.js';
+import {snackbarActionButtonClickedSignal, snackbarCloseButtonClickedSignal, snackbarSignal} from './signal.js';
 
 import type {SnackbarElement} from './element.js';
 import type {SnackbarActionHandler, SnackbarOptions} from './type.js';
@@ -19,6 +19,11 @@ let closeLastSnackbar: (() => Promise<void>) | null = null;
  */
 let unsubscribeActionButtonHandler: (() => void) | null = null;
 
+/**
+ * Store the function to unsubscribe the close button handler after close or action button clicked.
+ */
+let unsubscribeCloseButtonHandler: (() => void) | null = null;
+
 /**
  * Create snackbar element with given options.
  *
@@ -47,16 +52,20 @@ function createSnackbarElement(options: SnackbarOptions): SnackbarElement {
  * @param handler - Handler to be called when the action button is clicked.
  */
 function handleActionButtonClick(closeSnackbar: () => Promise<void>, handler?: SnackbarActionHandler): void {
+  logger.logMethod?.('handleActionButtonClick');
+
   const actionButtonClickHandler = async () => {
     logger.logOther?.('Snackbar action button clicked.');
 
     await handler?.();
     return closeSnackbar();
   };
 
-  // Subscribe to the action button click
+  /**
+   * Store the function to unsubscribe the action button handler after close or action button clicked.
+   */
   unsubscribeActionButtonHandler = snackbarActionButtonClickedSignal.subscribe(actionButtonClickHandler.bind(null), {
-    once: true,
+    // once: true, // not work!
   }).unsubscribe;
 }
 
@@ -80,13 +89,19 @@ async function showSnackbar(options: SnackbarOptions): Promise<void> {
 
     await element.close();
     unsubscribeActionButtonHandler?.();
+    unsubscribeCloseButtonHandler?.();
+
     closed = true;
   };
 
   if (options.action != null) {
     handleActionButtonClick(closeSnackbar, options.action.handler);
   }
 
+  if (options.addCloseButton === true) {
+    unsubscribeCloseButtonHandler = snackbarCloseButtonClickedSignal.subscribe(closeSnackbar.bind(null)).unsubscribe;
+  }
+
   // Close the last snackbar if it exists
   await closeLastSnackbar?.();
   closeLastSnackbar = closeSnackbar;

packages/snackbar/src/lib/signal.ts

@@ -6,7 +6,14 @@ import type {SnackbarOptions} from './type.js';
  * Signal triggered when the snackbar action button is clicked to close snackbar.
  */
 export const snackbarActionButtonClickedSignal = /* @__PURE__ */ new AlwatrTrigger({
-  name: 'snackbar-action-button-clicked',
+  name: 'snackbar-action-button-click',
+});
+
+/**
+ * Signal triggered when the snackbar close button is clicked to close snackbar.
+ */
+export const snackbarCloseButtonClickedSignal = /* @__PURE__ */ new AlwatrTrigger({
+  name: 'snackbar-close-button-click',
 });
 
 /**