codexly-ui 0.9.0 → 0.10.0

package/fesm2022/codexly-ui.mjs

@@ -11013,6 +11013,7 @@ class ClxToastComponent {
     _colorClass = computed(() => TOAST_COLOR_MAP[this.entry().type], ...(ngDevMode ? [{ debugName: "_colorClass" }] : /* istanbul ignore next */ []));
     _progressColor = computed(() => TOAST_PROGRESS_MAP[this.entry().type], ...(ngDevMode ? [{ debugName: "_progressColor" }] : /* istanbul ignore next */ []));
     _buttonColor = computed(() => this.entry().type, ...(ngDevMode ? [{ debugName: "_buttonColor" }] : /* istanbul ignore next */ []));
+    _actions = computed(() => this.entry().actions ?? (this.entry().action ? [this.entry().action] : []), ...(ngDevMode ? [{ debugName: "_actions" }] : /* istanbul ignore next */ []));
     get _card() {
         return this._el.nativeElement.querySelector('.clx-toast-card');
     }
@@ -11042,8 +11043,8 @@ class ClxToastComponent {
             this._paused = false;
     }
     // ─── Action ────────────────────────────────────────────────────────────────
-    _onAction() {
-        this.entry().action?.onClick();
+    _onAction(action) {
+        action.onClick();
         this.dismiss.emit(this.entry().id);
     }
     // ─── Animated exit (called by container before removal) ───────────────────
@@ -11113,18 +11114,22 @@ class ClxToastComponent {
         <p class="text-sm text-clx-text-muted leading-snug wrap-break-word">
           {{ entry().message }}
         </p>
-        @if (entry().action) {
-          <button
-            clx-button
-            type="button"
-            variant="link"
-            [color]="_buttonColor()"
-            size="xs"
-            class="mt-1 -ml-1 h-auto p-0"
-            (click)="_onAction()"
-          >
-            {{ entry().action!.label }}
-          </button>
+        @if (_actions().length) {
+          <div class="flex items-center gap-3 mt-2">
+            @for (a of _actions(); track a.label) {
+              <button
+                clx-button
+                type="button"
+                [variant]="a.variant ?? 'link'"
+                [color]="_buttonColor()"
+                size="xs"
+                [class]="a.variant && a.variant !== 'link' ? '' : '-ml-1 h-auto p-0'"
+                (click)="_onAction(a)"
+              >
+                {{ a.label }}
+              </button>
+            }
+          </div>
         }
       </div>
 
@@ -11184,18 +11189,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         <p class="text-sm text-clx-text-muted leading-snug wrap-break-word">
           {{ entry().message }}
         </p>
-        @if (entry().action) {
-          <button
-            clx-button
-            type="button"
-            variant="link"
-            [color]="_buttonColor()"
-            size="xs"
-            class="mt-1 -ml-1 h-auto p-0"
-            (click)="_onAction()"
-          >
-            {{ entry().action!.label }}
-          </button>
+        @if (_actions().length) {
+          <div class="flex items-center gap-3 mt-2">
+            @for (a of _actions(); track a.label) {
+              <button
+                clx-button
+                type="button"
+                [variant]="a.variant ?? 'link'"
+                [color]="_buttonColor()"
+                size="xs"
+                [class]="a.variant && a.variant !== 'link' ? '' : '-ml-1 h-auto p-0'"
+                (click)="_onAction(a)"
+              >
+                {{ a.label }}
+              </button>
+            }
+          </div>
         }
       </div>
 
@@ -15844,6 +15853,7 @@ class ClxToastService {
             animationOut: options.animationOut ?? TOAST_DEFAULTS.animationOut,
             animationDuration: options.animationDuration ?? TOAST_DEFAULTS.animationDuration,
             action: options.action,
+            actions: options.actions,
             removing: false,
         };
         const isBottom = position.startsWith('bottom');