codexly-ui 0.11.9 → 0.12.1

package/fesm2022/codexly-ui.mjs

@@ -12096,33 +12096,87 @@ const TOAST_DEFAULT_ICON = {
     white: 'info',
 };
 const c = CLX_COLOR_MAP;
-// ─── Border color per type ─────────────────────────────────────────────────────
+// ─── Card background (tinted surface) per type — bgMuted is a low-opacity tint
+// (bg-{color}-{shade}/10) so it reads as "tenue" in both light and dark theme,
+// instead of a fixed light shade (bgSubtle) that turns garish on dark surfaces. ──
+const TOAST_BG_MAP = {
+    red: c.red.bgMuted,
+    orange: c.orange.bgMuted,
+    amber: c.amber.bgMuted,
+    yellow: c.yellow.bgMuted,
+    lime: c.lime.bgMuted,
+    green: c.green.bgMuted,
+    emerald: c.emerald.bgMuted,
+    teal: c.teal.bgMuted,
+    cyan: c.cyan.bgMuted,
+    sky: c.sky.bgMuted,
+    blue: c.blue.bgMuted,
+    indigo: c.indigo.bgMuted,
+    violet: c.violet.bgMuted,
+    purple: c.purple.bgMuted,
+    fuchsia: c.fuchsia.bgMuted,
+    pink: c.pink.bgMuted,
+    rose: c.rose.bgMuted,
+    slate: c.slate.bgMuted,
+    gray: c.gray.bgMuted,
+    zinc: c.zinc.bgMuted,
+    neutral: c.neutral.bgMuted,
+    stone: c.stone.bgMuted,
+    white: c.white.bgMuted,
+};
+// ─── Card border color per type ───────────────────────────────────────────────
 const TOAST_BORDER_MAP = {
-    red: c.red.borderBase,
-    orange: c.orange.borderBase,
-    amber: c.amber.borderBase,
-    yellow: c.yellow.borderBase,
-    lime: c.lime.borderBase,
-    green: c.green.borderBase,
-    emerald: c.emerald.borderBase,
-    teal: c.teal.borderBase,
-    cyan: c.cyan.borderBase,
-    sky: c.sky.borderBase,
-    blue: c.blue.borderBase,
-    indigo: c.indigo.borderBase,
-    violet: c.violet.borderBase,
-    purple: c.purple.borderBase,
-    fuchsia: c.fuchsia.borderBase,
-    pink: c.pink.borderBase,
-    rose: c.rose.borderBase,
-    slate: c.slate.borderBase,
-    gray: c.gray.borderBase,
-    zinc: c.zinc.borderBase,
-    neutral: c.neutral.borderBase,
-    stone: c.stone.borderBase,
-    white: c.white.borderBase,
+    red: c.red.borderLight,
+    orange: c.orange.borderLight,
+    amber: c.amber.borderLight,
+    yellow: c.yellow.borderLight,
+    lime: c.lime.borderLight,
+    green: c.green.borderLight,
+    emerald: c.emerald.borderLight,
+    teal: c.teal.borderLight,
+    cyan: c.cyan.borderLight,
+    sky: c.sky.borderLight,
+    blue: c.blue.borderLight,
+    indigo: c.indigo.borderLight,
+    violet: c.violet.borderLight,
+    purple: c.purple.borderLight,
+    fuchsia: c.fuchsia.borderLight,
+    pink: c.pink.borderLight,
+    rose: c.rose.borderLight,
+    slate: c.slate.borderLight,
+    gray: c.gray.borderLight,
+    zinc: c.zinc.borderLight,
+    neutral: c.neutral.borderLight,
+    stone: c.stone.borderLight,
+    white: c.white.borderLight,
+};
+// ─── Icon disc background per type (solid, paired with white icon glyph) ─────
+const TOAST_ICON_BG_MAP = {
+    red: c.red.bgBase,
+    orange: c.orange.bgBase,
+    amber: c.amber.bgBase,
+    yellow: c.yellow.bgBase,
+    lime: c.lime.bgBase,
+    green: c.green.bgBase,
+    emerald: c.emerald.bgBase,
+    teal: c.teal.bgBase,
+    cyan: c.cyan.bgBase,
+    sky: c.sky.bgBase,
+    blue: c.blue.bgBase,
+    indigo: c.indigo.bgBase,
+    violet: c.violet.bgBase,
+    purple: c.purple.bgBase,
+    fuchsia: c.fuchsia.bgBase,
+    pink: c.pink.bgBase,
+    rose: c.rose.bgBase,
+    slate: c.slate.bgBase,
+    gray: c.gray.bgBase,
+    zinc: c.zinc.bgBase,
+    neutral: c.neutral.bgBase,
+    stone: c.stone.bgBase,
+    white: c.white.bgBase,
 };
-// ─── Icon / title text color per type ─────────────────────────────────────────
+// ─── Title / accent text color per type ───────────────────────────────────────
 const TOAST_COLOR_MAP = {
     red: c.red.textBase,
     orange: c.orange.textBase,
@@ -12201,11 +12255,29 @@ class ClxToastComponent {
     _destroyed = false;
     // ─── Derived visuals ──────────────────────────────────────────────────────
     _icon = computed(() => this.entry().icon ?? TOAST_DEFAULT_ICON[this.entry().type], ...(ngDevMode ? [{ debugName: "_icon" }] : /* istanbul ignore next */ []));
+    _bgClass = computed(() => TOAST_BG_MAP[this.entry().type], ...(ngDevMode ? [{ debugName: "_bgClass" }] : /* istanbul ignore next */ []));
     _borderClass = computed(() => TOAST_BORDER_MAP[this.entry().type], ...(ngDevMode ? [{ debugName: "_borderClass" }] : /* istanbul ignore next */ []));
+    _iconBgClass = computed(() => TOAST_ICON_BG_MAP[this.entry().type], ...(ngDevMode ? [{ debugName: "_iconBgClass" }] : /* istanbul ignore next */ []));
     _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 */ []));
+    _relativeTime = computed(() => {
+        const ts = this.entry().timestamp;
+        if (!ts)
+            return '';
+        const diffMs = Date.now() - ts.getTime();
+        const min = Math.round(diffMs / 60000);
+        if (min < 1)
+            return 'ahora';
+        if (min < 60)
+            return `hace ${min} min`;
+        const hr = Math.round(min / 60);
+        if (hr < 24)
+            return `hace ${hr} h`;
+        const day = Math.round(hr / 24);
+        return `hace ${day} d`;
+    }, ...(ngDevMode ? [{ debugName: "_relativeTime" }] : /* istanbul ignore next */ []));
     get _card() {
         return this._el.nativeElement.querySelector('.clx-toast-card');
     }
@@ -12282,40 +12354,57 @@ class ClxToastComponent {
     <!-- Toast card -->
     <div
       #card
-      class="clx-toast-card relative flex items-start gap-3 w-full bg-clx-surface backdrop-blur-md shadow-lg rounded-lg border-2 px-4 py-3.5 overflow-hidden"
-      [class]="_borderClass()"
+      class="clx-toast-card relative flex items-start gap-3.5 w-full bg-clx-surface backdrop-blur-md shadow-lg rounded-xl border px-4 py-3.5 overflow-hidden"
+      [class]="_bgClass() + ' ' + _borderClass()"
       (mouseenter)="_onMouseEnter()"
       (mouseleave)="_onMouseLeave()"
     >
-      <!-- Icon -->
+      <!-- Icon disc -->
       <span
-        clx-icon
-        [name]="_icon()"
-        size="sm"
-        class="shrink-0 mt-0.5"
-        [class]="_colorClass()"
-      ></span>
+        class="shrink-0 w-8 h-8 rounded-full flex items-center justify-center"
+        [class]="_iconBgClass()"
+      >
+        <span clx-icon [name]="_icon()" size="sm" class="text-white"></span>
+      </span>
 
       <!-- Content -->
-      <div class="flex-1 min-w-0">
+      <div class="flex-1 min-w-0 pt-0.5">
+        @if (entry().category) {
+          <div class="flex items-center gap-1.5 mb-0.5">
+            <span class="text-[11px] font-bold uppercase tracking-wide" [class]="_colorClass()">
+              {{ entry().category }}
+            </span>
+            @if (entry().timestamp) {
+              <span class="w-0.5 h-0.5 rounded-full bg-clx-text-subtle opacity-60"></span>
+              <span class="text-[11px] text-clx-text-subtle">{{ _relativeTime() }}</span>
+            }
+          </div>
+        }
         @if (entry().title) {
-          <p class="text-sm font-semibold leading-snug mb-0.5" [class]="_colorClass()">
+          <p class="text-sm font-semibold leading-snug mb-0.5 flex items-center gap-1.5 flex-wrap" [class]="_colorClass()">
             {{ entry().title }}
+            @if (entry().badgeLabel) {
+              <span
+                class="text-[10px] font-bold uppercase tracking-wide px-1.5 py-0.5 rounded text-white"
+                [class]="_iconBgClass()"
+              >
+                {{ entry().badgeLabel }}
+              </span>
+            }
           </p>
         }
-        <p class="text-sm text-clx-text-muted leading-snug wrap-break-word">
+        <p class="text-sm text-clx-text leading-snug wrap-break-word opacity-80">
           {{ entry().message }}
         </p>
         @if (_actions().length) {
-          <div class="flex items-center gap-3 mt-2">
-            @for (a of _actions(); track a.label) {
+          <div class="flex items-center gap-2 mt-2.5">
+            @for (a of _actions(); track a.label; let first = $first) {
               <button
                 clx-button
                 type="button"
-                [variant]="a.variant ?? 'link'"
+                [variant]="(a.variant ?? (first ? 'primary' : 'ghost')) === 'primary' ? 'solid' : 'ghost'"
                 [color]="_buttonColor()"
                 size="xs"
-                [class]="a.variant && a.variant !== 'link' ? '' : '-ml-1 h-auto p-0'"
                 (click)="_onAction(a)"
               >
                 {{ a.label }}
@@ -12340,9 +12429,9 @@ class ClxToastComponent {
 
       <!-- Progress bar -->
       @if (entry().showProgress && entry().duration > 0) {
-        <div class="absolute bottom-0 left-0 right-0 h-0.5 bg-clx-surface-2">
+        <div class="absolute bottom-0 left-px right-px h-0.5 overflow-hidden rounded-b-[11px]">
           <div
-            class="h-full w-full origin-left transition-none"
+            class="h-full w-full origin-left transition-none opacity-45"
             [class]="_progressColor()"
             [ngStyle]="{ transform: 'scaleX(' + (_progressPct() / 100) + ')' }"
           ></div>
@@ -12357,40 +12446,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
     <!-- Toast card -->
     <div
       #card
-      class="clx-toast-card relative flex items-start gap-3 w-full bg-clx-surface backdrop-blur-md shadow-lg rounded-lg border-2 px-4 py-3.5 overflow-hidden"
-      [class]="_borderClass()"
+      class="clx-toast-card relative flex items-start gap-3.5 w-full bg-clx-surface backdrop-blur-md shadow-lg rounded-xl border px-4 py-3.5 overflow-hidden"
+      [class]="_bgClass() + ' ' + _borderClass()"
       (mouseenter)="_onMouseEnter()"
       (mouseleave)="_onMouseLeave()"
     >
-      <!-- Icon -->
+      <!-- Icon disc -->
       <span
-        clx-icon
-        [name]="_icon()"
-        size="sm"
-        class="shrink-0 mt-0.5"
-        [class]="_colorClass()"
-      ></span>
+        class="shrink-0 w-8 h-8 rounded-full flex items-center justify-center"
+        [class]="_iconBgClass()"
+      >
+        <span clx-icon [name]="_icon()" size="sm" class="text-white"></span>
+      </span>
 
       <!-- Content -->
-      <div class="flex-1 min-w-0">
+      <div class="flex-1 min-w-0 pt-0.5">
+        @if (entry().category) {
+          <div class="flex items-center gap-1.5 mb-0.5">
+            <span class="text-[11px] font-bold uppercase tracking-wide" [class]="_colorClass()">
+              {{ entry().category }}
+            </span>
+            @if (entry().timestamp) {
+              <span class="w-0.5 h-0.5 rounded-full bg-clx-text-subtle opacity-60"></span>
+              <span class="text-[11px] text-clx-text-subtle">{{ _relativeTime() }}</span>
+            }
+          </div>
+        }
         @if (entry().title) {
-          <p class="text-sm font-semibold leading-snug mb-0.5" [class]="_colorClass()">
+          <p class="text-sm font-semibold leading-snug mb-0.5 flex items-center gap-1.5 flex-wrap" [class]="_colorClass()">
             {{ entry().title }}
+            @if (entry().badgeLabel) {
+              <span
+                class="text-[10px] font-bold uppercase tracking-wide px-1.5 py-0.5 rounded text-white"
+                [class]="_iconBgClass()"
+              >
+                {{ entry().badgeLabel }}
+              </span>
+            }
           </p>
         }
-        <p class="text-sm text-clx-text-muted leading-snug wrap-break-word">
+        <p class="text-sm text-clx-text leading-snug wrap-break-word opacity-80">
           {{ entry().message }}
         </p>
         @if (_actions().length) {
-          <div class="flex items-center gap-3 mt-2">
-            @for (a of _actions(); track a.label) {
+          <div class="flex items-center gap-2 mt-2.5">
+            @for (a of _actions(); track a.label; let first = $first) {
               <button
                 clx-button
                 type="button"
-                [variant]="a.variant ?? 'link'"
+                [variant]="(a.variant ?? (first ? 'primary' : 'ghost')) === 'primary' ? 'solid' : 'ghost'"
                 [color]="_buttonColor()"
                 size="xs"
-                [class]="a.variant && a.variant !== 'link' ? '' : '-ml-1 h-auto p-0'"
                 (click)="_onAction(a)"
               >
                 {{ a.label }}
@@ -12415,9 +12521,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
 
       <!-- Progress bar -->
       @if (entry().showProgress && entry().duration > 0) {
-        <div class="absolute bottom-0 left-0 right-0 h-0.5 bg-clx-surface-2">
+        <div class="absolute bottom-0 left-px right-px h-0.5 overflow-hidden rounded-b-[11px]">
           <div
-            class="h-full w-full origin-left transition-none"
+            class="h-full w-full origin-left transition-none opacity-45"
             [class]="_progressColor()"
             [ngStyle]="{ transform: 'scaleX(' + (_progressPct() / 100) + ')' }"
           ></div>
@@ -17410,6 +17516,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
+const NOTIFICATION_SEVERITY_TO_TOAST_TYPE = {
+    success: 'green',
+    warning: 'amber',
+    info: 'sky',
+    error: 'red',
+};
 class ClxToastService {
     _appRef = inject(ApplicationRef);
     _injector = inject(Injector);
@@ -17430,6 +17542,9 @@ class ClxToastService {
             message: options.message,
             title: options.title,
             icon: options.icon,
+            category: options.category,
+            timestamp: options.timestamp,
+            badgeLabel: options.badgeLabel,
             position,
             duration: options.duration ?? TOAST_DEFAULTS.duration,
             showProgress: options.showProgress ?? TOAST_DEFAULTS.showProgress,
@@ -17457,6 +17572,19 @@ class ClxToastService {
     info(message, opts = {}) {
         this.show({ ...opts, type: 'sky', message });
     }
+    /** Shows a toast built straight from a live ClxNotificationItem (e.g. on SSE arrival) — the same
+     *  object already driving the notification panel/bell, no manual field mapping at the call site. */
+    fromNotification(item, opts = {}) {
+        this.show({
+            ...opts,
+            type: NOTIFICATION_SEVERITY_TO_TOAST_TYPE[item.severity],
+            icon: item.icon,
+            title: item.title,
+            message: item.detail ?? '',
+            category: item.category,
+            timestamp: new Date(item.createdAt),
+        });
+    }
     dismissAll() {
         this._containers.forEach(c => c.instance.entries.set([]));
     }