@nuralyui/toast 0.0.2 → 0.0.10

package/toast.component.js

@@ -1,82 +1,370 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { LitElement, html, property, customElement, css } from 'lit-element';
-let LitToast = class LitToast extends LitElement {
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styles } from './toast.style.js';
+import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
+import { DEFAULT_TOAST_DURATION, DEFAULT_MAX_TOASTS, EMPTY_STRING } from './toast.types.js';
+// Import required components
+import '../icon/icon.component.js';
+import '../button/index.js';
+/**
+ * Toast notification component for displaying temporary messages.
+ *
+ * Provides a flexible notification system with multiple types, positions, and animations.
+ * Supports stacking multiple toasts, auto-dismiss (enabled by default), action buttons,
+ * custom HTML content, and manual closing.
+ *
+ * @example
+ * ```html
+ * <!-- Basic usage with auto-dismiss -->
+ * <nr-toast position="top-right"></nr-toast>
+ *
+ * <!-- Disable auto-dismiss to require manual closing -->
+ * <nr-toast position="top-right" auto-dismiss="false"></nr-toast>
+ *
+ * <!-- Programmatic usage -->
+ * <script>
+ *   const toast = document.querySelector('nr-toast');
+ *   toast.show({ text: 'Success!', type: 'success' });
+ *   toast.show({ text: 'Error occurred', type: 'error', duration: 7000 });
+ *
+ *   // Disable auto-dismiss for specific toast
+ *   toast.show({ text: 'Persistent message', autoDismiss: false });
+ *
+ *   // Toast with action button
+ *   toast.show({
+ *     text: 'Item deleted',
+ *     type: 'success',
+ *     button: {
+ *       label: 'Undo',
+ *       onClick: () => console.log('Undo clicked'),
+ *       type: 'primary'
+ *     }
+ *   });
+ *
+ *   // Custom HTML content (GDPR consent example)
+ *   toast.show({
+ *     content: html`
+ *       <div>
+ *         <h4>Cookie Consent</h4>
+ *         <p>We use cookies to improve your experience.</p>
+ *         <div style="display: flex; gap: 0.5rem; margin-top: 0.5rem;">
+ *           <nr-button size="small" type="primary">Accept</nr-button>
+ *           <nr-button size="small" type="secondary">Decline</nr-button>
+ *         </div>
+ *       </div>
+ *     `,
+ *     autoDismiss: false,
+ *     closable: true
+ *   });
+ * </script>
+ * ```
+ *
+ * @fires nr-toast-show - Toast shown
+ * @fires nr-toast-close - Toast closed
+ * @fires nr-toast-click - Toast clicked
+ *
+ * @cssproperty --nuraly-z-index-toast - Toast z-index
+ * @cssproperty --nuraly-toast-default-background - Default toast background
+ * @cssproperty --nuraly-toast-success-background - Success toast background
+ * @cssproperty --nuraly-toast-error-background - Error toast background
+ * @cssproperty --nuraly-toast-warning-background - Warning toast background
+ * @cssproperty --nuraly-toast-info-background - Info toast background
+ */
+let NrToastElement = class NrToastElement extends NuralyUIBaseMixin(LitElement) {
     constructor() {
         super(...arguments);
+        this.requiredComponents = ['nr-icon', 'nr-button'];
+        /** Position of toast container on screen */
+        this.position = "top-right" /* ToastPosition.TopRight */;
+        /** Maximum number of toasts to display */
+        this.maxToasts = DEFAULT_MAX_TOASTS;
+        /** Default duration for toasts in milliseconds */
+        this.defaultDuration = DEFAULT_TOAST_DURATION;
+        /** Animation type for toasts */
+        this.animation = "fade" /* ToastAnimation.Fade */;
+        /** Whether to stack toasts or replace */
+        this.stack = true;
+        /** Auto dismiss toasts after duration (default: true) */
+        this.autoDismiss = true;
+        /** Internal state: active toasts */
         this.toasts = [];
+        /** Timeout map for auto-dismiss */
+        this.timeouts = new Map();
+    }
+    /**
+     * Show a new toast notification
+     * @param config - Toast configuration
+     * @returns Toast ID for manual control
+     */
+    show(config) {
+        var _a, _b, _c;
+        const toastConfig = typeof config === 'string'
+            ? { text: config }
+            : config;
+        const toast = {
+            id: this.generateId(),
+            timestamp: Date.now(),
+            text: toastConfig.text,
+            content: toastConfig.content,
+            type: toastConfig.type || "default" /* ToastType.Default */,
+            duration: (_a = toastConfig.duration) !== null && _a !== void 0 ? _a : this.defaultDuration,
+            autoDismiss: (_b = toastConfig.autoDismiss) !== null && _b !== void 0 ? _b : this.autoDismiss,
+            closable: (_c = toastConfig.closable) !== null && _c !== void 0 ? _c : true,
+            icon: toastConfig.icon || this.getDefaultIcon(toastConfig.type),
+            customClass: toastConfig.customClass,
+            button: toastConfig.button,
+            onClose: toastConfig.onClose,
+            onClick: toastConfig.onClick,
+        };
+        // Handle max toasts
+        if (!this.stack) {
+            this.clearAll();
+        }
+        else if (this.toasts.length >= this.maxToasts) {
+            this.removeToast(this.toasts[0].id);
+        }
+        // Add toast
+        this.toasts = [...this.toasts, toast];
+        // Emit show event
+        this.emitToastEvent('nr-toast-show', toast, 'show');
+        // Set auto-dismiss timeout
+        if (toast.autoDismiss && toast.duration && toast.duration > 0) {
+            const timeoutId = window.setTimeout(() => {
+                this.removeToast(toast.id);
+            }, toast.duration);
+            this.timeouts.set(toast.id, timeoutId);
+        }
+        return toast.id;
+    }
+    /**
+     * Show success toast
+     */
+    success(text, duration) {
+        return this.show({ text, type: "success" /* ToastType.Success */, duration });
+    }
+    /**
+     * Show error toast
+     */
+    error(text, duration) {
+        return this.show({ text, type: "error" /* ToastType.Error */, duration });
+    }
+    /**
+     * Show warning toast
+     */
+    warning(text, duration) {
+        return this.show({ text, type: "warning" /* ToastType.Warning */, duration });
+    }
+    /**
+     * Show info toast
+     */
+    info(text, duration) {
+        return this.show({ text, type: "info" /* ToastType.Info */, duration });
+    }
+    /**
+     * Remove a specific toast
+     */
+    removeToast(id) {
+        const toast = this.toasts.find(t => t.id === id);
+        if (!toast)
+            return;
+        // Mark as removing for animation
+        toast.removing = true;
+        this.requestUpdate();
+        // Clear timeout
+        const timeoutId = this.timeouts.get(id);
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+            this.timeouts.delete(id);
+        }
+        // Remove after animation
+        setTimeout(() => {
+            var _a;
+            this.toasts = this.toasts.filter(t => t.id !== id);
+            // Emit close event
+            this.emitToastEvent('nr-toast-close', toast, 'close');
+            // Call onClose callback
+            (_a = toast.onClose) === null || _a === void 0 ? void 0 : _a.call(toast);
+        }, 300); // Animation duration
+    }
+    /**
+     * Clear all toasts
+     */
+    clearAll() {
+        this.toasts.forEach(toast => {
+            const timeoutId = this.timeouts.get(toast.id);
+            if (timeoutId) {
+                clearTimeout(timeoutId);
+            }
+        });
+        this.timeouts.clear();
+        this.toasts = [];
+    }
+    /**
+     * Handle toast click
+     */
+    handleToastClick(toast) {
+        var _a;
+        this.emitToastEvent('nr-toast-click', toast, 'click');
+        (_a = toast.onClick) === null || _a === void 0 ? void 0 : _a.call(toast);
+    }
+    /**
+     * Handle close button click
+     */
+    handleCloseClick(event, toast) {
+        event.stopPropagation();
+        this.removeToast(toast.id);
+    }
+    /**
+     * Get default icon for toast type
+     */
+    getDefaultIcon(type) {
+        switch (type) {
+            case "success" /* ToastType.Success */:
+                return 'check-circle';
+            case "error" /* ToastType.Error */:
+                return 'x-circle';
+            case "warning" /* ToastType.Warning */:
+                return 'alert-triangle';
+            case "info" /* ToastType.Info */:
+                return 'info';
+            default:
+                return EMPTY_STRING;
+        }
+    }
+    /**
+     * Generate unique ID
+     */
+    generateId() {
+        return `toast-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    }
+    /**
+     * Get animation class
+     */
+    getAnimationClass(toast) {
+        const isRemoving = toast.removing;
+        const suffix = isRemoving ? 'out' : 'in';
+        return `toast--${this.animation}-${suffix}`;
+    }
+    /**
+     * Emit toast event
+     */
+    emitToastEvent(eventName, toast, action) {
+        this.dispatchEvent(new CustomEvent(eventName, {
+            detail: { toast, action },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.clearAll();
     }
     render() {
         return html `
       <div class="toast-container">
-        ${this.toasts.map((toast, index) => html `
-            <div class="toast show" @animationend="${() => this.handleAnimationEnd(index)}">${toast.text}</div>
-          `)}
+        ${repeat(this.toasts, toast => toast.id, toast => this.renderToast(toast))}
       </div>
     `;
     }
-    show(text = '', duration = 5000) {
-        const newToast = { text, duration };
-        this.toasts = [...this.toasts, newToast];
-        if (this.toasts.length === 1) {
-        }
-        setTimeout(() => {
-            this.toasts.shift();
-            this.requestUpdate('toasts');
-        }, duration);
-    }
-    handleAnimationEnd(index) {
-        this.toasts.splice(index, 1);
-        this.requestUpdate('toasts');
-        if (this.toasts.length > 0) {
-        }
+    renderToast(toast) {
+        const classes = {
+            'toast': true,
+            [`toast--${toast.type}`]: true,
+            [this.getAnimationClass(toast)]: true,
+            [toast.customClass || EMPTY_STRING]: !!toast.customClass,
+        };
+        return html `
+      <div
+        class=${classMap(classes)}
+        @click=${() => this.handleToastClick(toast)}
+        role="alert"
+        aria-live="polite"
+      >
+        ${toast.icon ? html `
+          <div class="toast__icon">
+            <nr-icon name=${toast.icon} size="medium"></nr-icon>
+          </div>
+        ` : nothing}
+        
+        <div class="toast__content">
+          ${toast.content
+            ? toast.content
+            : html `
+              <div class="toast__text">${toast.text}</div>
+              ${toast.button ? this.renderButton(toast.button) : nothing}
+            `}
+        </div>
+        
+        ${toast.closable ? html `
+          <button
+            class="toast__close"
+            @click=${(e) => this.handleCloseClick(e, toast)}
+            aria-label="Close notification"
+            type="button"
+          >
+            <nr-icon name="x" size="small"></nr-icon>
+          </button>
+        ` : nothing}
+      </div>
+    `;
+    }
+    renderButton(button) {
+        const handleButtonClick = (e) => {
+            e.stopPropagation();
+            button.onClick(e);
+        };
+        return html `
+      <div class="toast__button">
+        <nr-button
+          type=${button.type || 'default'}
+          size=${button.size || 'small'}
+          ?disabled=${button.disabled || false}
+          @click=${handleButtonClick}
+        >
+          ${button.icon ? html `<nr-icon slot="icon-left" name=${button.icon}></nr-icon>` : nothing}
+          ${button.label}
+        </nr-button>
+      </div>
+    `;
     }
 };
-LitToast.styles = css `
-    .toast-container {
-      position: fixed;
-      top: 20px;
-      right: 20px;
-      z-index: 1000;
-    }
-
-    .toast {
-      background-color: #333;
-      color: #fff;
-      padding: 10px 20px;
-      margin-bottom: 10px;
-      border-radius: 5px;
-      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-      animation: fadein 0.5s, fadeout 0.5s 2.5s 3000ms;
-    }
-
-    @keyframes fadein {
-      from {
-        opacity: 0;
-      }
-      to {
-        opacity: 1;
-      }
-    }
-
-    @keyframes fadeout {
-      from {
-        opacity: 1;
-      }
-      to {
-        opacity: 0;
-      }
-    }
-  `;
+NrToastElement.styles = styles;
+__decorate([
+    property({ type: String, reflect: true })
+], NrToastElement.prototype, "position", void 0);
+__decorate([
+    property({ type: Number })
+], NrToastElement.prototype, "maxToasts", void 0);
+__decorate([
+    property({ type: Number })
+], NrToastElement.prototype, "defaultDuration", void 0);
+__decorate([
+    property({ type: String })
+], NrToastElement.prototype, "animation", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrToastElement.prototype, "stack", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrToastElement.prototype, "autoDismiss", void 0);
 __decorate([
-    property({ type: Array })
-], LitToast.prototype, "toasts", void 0);
-LitToast = __decorate([
-    customElement('hy-toast')
-], LitToast);
-export { LitToast };
+    state()
+], NrToastElement.prototype, "toasts", void 0);
+NrToastElement = __decorate([
+    customElement('nr-toast')
+], NrToastElement);
+export { NrToastElement };
 //# sourceMappingURL=toast.component.js.map

package/toast.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.component.js","sourceRoot":"","sources":["../../../src/components/toast/toast.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAG7E,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAAxC;;QAsC6B,WAAM,GAAU,EAAE,CAAC;IAoChD,CAAC;IAlCU,MAAM;QACb,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,MAAM,CAAC,GAAG,CACf,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;qDACqB,GAAG,EAAE,CAC5C,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,KAAK,KAAK,CAAC,IAAI;WAChD,CACF;;KAEJ,CAAC;IACJ,CAAC;IAED,IAAI,CAAC,IAAI,GAAG,EAAE,EAAE,QAAQ,GAAG,IAAI;QAC7B,MAAM,QAAQ,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;QACpC,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;QAEzC,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE;SAC7B;QAED,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;YACpB,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC/B,CAAC,EAAE,QAAQ,CAAC,CAAC;IACf,CAAC;IAID,kBAAkB,CAAC,KAAU;QAC3B,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QAC7B,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC7B,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;SAC3B;IACH,CAAC;CACF,CAAA;AAzEkB,eAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmC3B,CAAA;AAEyB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;wCAAoB;AAtCnC,QAAQ;IADpB,aAAa,CAAC,UAAU,CAAC;GACb,QAAQ,CA0EpB;SA1EY,QAAQ","sourcesContent":["import { LitElement, html, property, customElement, css } from 'lit-element';\n\n@customElement('hy-toast')\nexport class LitToast extends LitElement {\n   static override styles = css`\n    .toast-container {\n      position: fixed;\n      top: 20px;\n      right: 20px;\n      z-index: 1000;\n    }\n\n    .toast {\n      background-color: #333;\n      color: #fff;\n      padding: 10px 20px;\n      margin-bottom: 10px;\n      border-radius: 5px;\n      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);\n      animation: fadein 0.5s, fadeout 0.5s 2.5s 3000ms;\n    }\n\n    @keyframes fadein {\n      from {\n        opacity: 0;\n      }\n      to {\n        opacity: 1;\n      }\n    }\n\n    @keyframes fadeout {\n      from {\n        opacity: 1;\n      }\n      to {\n        opacity: 0;\n      }\n    }\n  `;\n\n  @property({ type: Array }) toasts  :any[]= [];\n\n  override render() {\n    return html`\n      <div class=\"toast-container\">\n        ${this.toasts.map(\n          (toast, index) => html`\n            <div class=\"toast show\" @animationend=\"${() =>\n              this.handleAnimationEnd(index)}\">${toast.text}</div>\n          `\n        )}\n      </div>\n    `;\n  }\n\n  show(text = '', duration = 5000) {\n    const newToast = { text, duration };\n    this.toasts = [...this.toasts, newToast];\n\n    if (this.toasts.length === 1) {\n    }\n\n    setTimeout(() => {\n      this.toasts.shift();\n      this.requestUpdate('toasts');\n    }, duration);\n  }\n\n\n\n  handleAnimationEnd(index :any) {\n    this.toasts.splice(index, 1);\n    this.requestUpdate('toasts');\n    if (this.toasts.length > 0) {\n    }\n  }\n}\n"]}
+{"version":3,"file":"toast.component.js","sourceRoot":"","sources":["../../../src/components/toast/toast.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './toast.style.js';\nimport { NuralyUIBaseMixin } from '../../shared/base-mixin.js';\nimport {\n  ToastType,\n  ToastPosition,\n  ToastAnimation,\n  ToastConfig,\n  ToastItem,\n  ToastEventDetail,\n  ToastButton,\n  DEFAULT_TOAST_DURATION,\n  DEFAULT_MAX_TOASTS,\n  EMPTY_STRING\n} from './toast.types.js';\n\n// Import required components\nimport '../icon/icon.component.js';\nimport '../button/index.js';\n\n/**\n * Toast notification component for displaying temporary messages.\n * \n * Provides a flexible notification system with multiple types, positions, and animations.\n * Supports stacking multiple toasts, auto-dismiss (enabled by default), action buttons, \n * custom HTML content, and manual closing.\n * \n * @example\n * ```html\n * <!-- Basic usage with auto-dismiss -->\n * <nr-toast position=\"top-right\"></nr-toast>\n * \n * <!-- Disable auto-dismiss to require manual closing -->\n * <nr-toast position=\"top-right\" auto-dismiss=\"false\"></nr-toast>\n * \n * <!-- Programmatic usage -->\n * <script>\n *   const toast = document.querySelector('nr-toast');\n *   toast.show({ text: 'Success!', type: 'success' });\n *   toast.show({ text: 'Error occurred', type: 'error', duration: 7000 });\n *   \n *   // Disable auto-dismiss for specific toast\n *   toast.show({ text: 'Persistent message', autoDismiss: false });\n *   \n *   // Toast with action button\n *   toast.show({\n *     text: 'Item deleted',\n *     type: 'success',\n *     button: {\n *       label: 'Undo',\n *       onClick: () => console.log('Undo clicked'),\n *       type: 'primary'\n *     }\n *   });\n *   \n *   // Custom HTML content (GDPR consent example)\n *   toast.show({\n *     content: html`\n *       <div>\n *         <h4>Cookie Consent</h4>\n *         <p>We use cookies to improve your experience.</p>\n *         <div style=\"display: flex; gap: 0.5rem; margin-top: 0.5rem;\">\n *           <nr-button size=\"small\" type=\"primary\">Accept</nr-button>\n *           <nr-button size=\"small\" type=\"secondary\">Decline</nr-button>\n *         </div>\n *       </div>\n *     `,\n *     autoDismiss: false,\n *     closable: true\n *   });\n * </script>\n * ```\n * \n * @fires nr-toast-show - Toast shown\n * @fires nr-toast-close - Toast closed\n * @fires nr-toast-click - Toast clicked\n * \n * @cssproperty --nuraly-z-index-toast - Toast z-index\n * @cssproperty --nuraly-toast-default-background - Default toast background\n * @cssproperty --nuraly-toast-success-background - Success toast background\n * @cssproperty --nuraly-toast-error-background - Error toast background\n * @cssproperty --nuraly-toast-warning-background - Warning toast background\n * @cssproperty --nuraly-toast-info-background - Info toast background\n */\n@customElement('nr-toast')\nexport class NrToastElement extends NuralyUIBaseMixin(LitElement) {\n  static override styles = styles;\n\n  override requiredComponents = ['nr-icon', 'nr-button'];\n\n  /** Position of toast container on screen */\n  @property({ type: String, reflect: true })\n  position: ToastPosition = ToastPosition.TopRight;\n\n  /** Maximum number of toasts to display */\n  @property({ type: Number })\n  maxToasts = DEFAULT_MAX_TOASTS;\n\n  /** Default duration for toasts in milliseconds */\n  @property({ type: Number })\n  defaultDuration = DEFAULT_TOAST_DURATION;\n\n  /** Animation type for toasts */\n  @property({ type: String })\n  animation: ToastAnimation = ToastAnimation.Fade;\n\n  /** Whether to stack toasts or replace */\n  @property({ type: Boolean })\n  stack = true;\n\n  /** Auto dismiss toasts after duration (default: true) */\n  @property({ type: Boolean })\n  autoDismiss = true;\n\n  /** Internal state: active toasts */\n  @state()\n  private toasts: ToastItem[] = [];\n\n  /** Timeout map for auto-dismiss */\n  private timeouts = new Map<string, number>();\n\n  /**\n   * Show a new toast notification\n   * @param config - Toast configuration\n   * @returns Toast ID for manual control\n   */\n  show(config: string | ToastConfig): string {\n    const toastConfig: ToastConfig = typeof config === 'string' \n      ? { text: config }\n      : config;\n\n    const toast: ToastItem = {\n      id: this.generateId(),\n      timestamp: Date.now(),\n      text: toastConfig.text,\n      content: toastConfig.content,\n      type: toastConfig.type || ToastType.Default,\n      duration: toastConfig.duration ?? this.defaultDuration,\n      autoDismiss: toastConfig.autoDismiss ?? this.autoDismiss,\n      closable: toastConfig.closable ?? true,\n      icon: toastConfig.icon || this.getDefaultIcon(toastConfig.type),\n      customClass: toastConfig.customClass,\n      button: toastConfig.button,\n      onClose: toastConfig.onClose,\n      onClick: toastConfig.onClick,\n    };\n\n    // Handle max toasts\n    if (!this.stack) {\n      this.clearAll();\n    } else if (this.toasts.length >= this.maxToasts) {\n      this.removeToast(this.toasts[0].id);\n    }\n\n    // Add toast\n    this.toasts = [...this.toasts, toast];\n\n    // Emit show event\n    this.emitToastEvent('nr-toast-show', toast, 'show');\n\n    // Set auto-dismiss timeout\n    if (toast.autoDismiss && toast.duration && toast.duration > 0) {\n      const timeoutId = window.setTimeout(() => {\n        this.removeToast(toast.id);\n      }, toast.duration);\n      this.timeouts.set(toast.id, timeoutId);\n    }\n\n    return toast.id;\n  }\n\n  /**\n   * Show success toast\n   */\n  success(text: string, duration?: number): string {\n    return this.show({ text, type: ToastType.Success, duration });\n  }\n\n  /**\n   * Show error toast\n   */\n  error(text: string, duration?: number): string {\n    return this.show({ text, type: ToastType.Error, duration });\n  }\n\n  /**\n   * Show warning toast\n   */\n  warning(text: string, duration?: number): string {\n    return this.show({ text, type: ToastType.Warning, duration });\n  }\n\n  /**\n   * Show info toast\n   */\n  info(text: string, duration?: number): string {\n    return this.show({ text, type: ToastType.Info, duration });\n  }\n\n  /**\n   * Remove a specific toast\n   */\n  removeToast(id: string): void {\n    const toast = this.toasts.find(t => t.id === id);\n    if (!toast) return;\n\n    // Mark as removing for animation\n    toast.removing = true;\n    this.requestUpdate();\n\n    // Clear timeout\n    const timeoutId = this.timeouts.get(id);\n    if (timeoutId) {\n      clearTimeout(timeoutId);\n      this.timeouts.delete(id);\n    }\n\n    // Remove after animation\n    setTimeout(() => {\n      this.toasts = this.toasts.filter(t => t.id !== id);\n      \n      // Emit close event\n      this.emitToastEvent('nr-toast-close', toast, 'close');\n      \n      // Call onClose callback\n      toast.onClose?.();\n    }, 300); // Animation duration\n  }\n\n  /**\n   * Clear all toasts\n   */\n  clearAll(): void {\n    this.toasts.forEach(toast => {\n      const timeoutId = this.timeouts.get(toast.id);\n      if (timeoutId) {\n        clearTimeout(timeoutId);\n      }\n    });\n    this.timeouts.clear();\n    this.toasts = [];\n  }\n\n  /**\n   * Handle toast click\n   */\n  private handleToastClick(toast: ToastItem): void {\n    this.emitToastEvent('nr-toast-click', toast, 'click');\n    toast.onClick?.();\n  }\n\n  /**\n   * Handle close button click\n   */\n  private handleCloseClick(event: Event, toast: ToastItem): void {\n    event.stopPropagation();\n    this.removeToast(toast.id);\n  }\n\n  /**\n   * Get default icon for toast type\n   */\n  private getDefaultIcon(type?: ToastType): string {\n    switch (type) {\n      case ToastType.Success:\n        return 'check-circle';\n      case ToastType.Error:\n        return 'x-circle';\n      case ToastType.Warning:\n        return 'alert-triangle';\n      case ToastType.Info:\n        return 'info';\n      default:\n        return EMPTY_STRING;\n    }\n  }\n\n  /**\n   * Generate unique ID\n   */\n  private generateId(): string {\n    return `toast-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;\n  }\n\n  /**\n   * Get animation class\n   */\n  private getAnimationClass(toast: ToastItem): string {\n    const isRemoving = toast.removing;\n    const suffix = isRemoving ? 'out' : 'in';\n    return `toast--${this.animation}-${suffix}`;\n  }\n\n  /**\n   * Emit toast event\n   */\n  private emitToastEvent(eventName: string, toast: ToastItem, action: ToastEventDetail['action']): void {\n    this.dispatchEvent(new CustomEvent<ToastEventDetail>(eventName, {\n      detail: { toast, action },\n      bubbles: true,\n      composed: true\n    }));\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.clearAll();\n  }\n\n  override render() {\n    return html`\n      <div class=\"toast-container\">\n        ${repeat(\n          this.toasts,\n          toast => toast.id,\n          toast => this.renderToast(toast)\n        )}\n      </div>\n    `;\n  }\n\n  private renderToast(toast: ToastItem) {\n    const classes = {\n      'toast': true,\n      [`toast--${toast.type}`]: true,\n      [this.getAnimationClass(toast)]: true,\n      [toast.customClass || EMPTY_STRING]: !!toast.customClass,\n    };\n\n    return html`\n      <div\n        class=${classMap(classes)}\n        @click=${() => this.handleToastClick(toast)}\n        role=\"alert\"\n        aria-live=\"polite\"\n      >\n        ${toast.icon ? html`\n          <div class=\"toast__icon\">\n            <nr-icon name=${toast.icon} size=\"medium\"></nr-icon>\n          </div>\n        ` : nothing}\n        \n        <div class=\"toast__content\">\n          ${toast.content \n            ? toast.content \n            : html`\n              <div class=\"toast__text\">${toast.text}</div>\n              ${toast.button ? this.renderButton(toast.button) : nothing}\n            `\n          }\n        </div>\n        \n        ${toast.closable ? html`\n          <button\n            class=\"toast__close\"\n            @click=${(e: Event) => this.handleCloseClick(e, toast)}\n            aria-label=\"Close notification\"\n            type=\"button\"\n          >\n            <nr-icon name=\"x\" size=\"small\"></nr-icon>\n          </button>\n        ` : nothing}\n      </div>\n    `;\n  }\n\n  private renderButton(button: ToastButton) {\n    const handleButtonClick = (e: Event) => {\n      e.stopPropagation();\n      button.onClick(e);\n    };\n\n    return html`\n      <div class=\"toast__button\">\n        <nr-button\n          type=${button.type || 'default'}\n          size=${button.size || 'small'}\n          ?disabled=${button.disabled || false}\n          @click=${handleButtonClick}\n        >\n          ${button.icon ? html`<nr-icon slot=\"icon-left\" name=${button.icon}></nr-icon>` : nothing}\n          ${button.label}\n        </nr-button>\n      </div>\n    `;\n  }\n}\n"]}

package/toast.style.d.ts

@@ -1,3 +1,14 @@
-declare const _default: import("lit").CSSResult;
-export default _default;
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Toast component styles for the Hybrid UI Library
+ * Using shared CSS variables from /src/shared/themes/
+ *
+ * This file contains all the styling for the nr-toast component with
+ * clean CSS variable usage without local fallbacks and proper theme switching support.
+ */
+export declare const styles: import("lit").CSSResult;
 //# sourceMappingURL=toast.style.d.ts.map