codexly-ui 0.10.113 → 0.11.1

package/fesm2022/codexly-ui.mjs

@@ -627,6 +627,28 @@ class ClxThemeService {
             bordered: t?.bordered ?? true,
         };
     }, ...(ngDevMode ? [{ debugName: "paginationStyle" }] : /* istanbul ignore next */ []));
+    /** Resolved style for ClxNotificationComponent — severity colors fall back to built-in
+     *  green/amber/sky/red, unreadColor to primaryColor, borderColor to listBorderColor then
+     *  primaryColor, radius to the app-wide borderRadius. Per-instance inputs on clx-notification
+     *  still take precedence over this theme-wide default. */
+    notificationStyle = computed(() => {
+        const n = this._config().notification;
+        return {
+            severityColors: {
+                success: n?.severityColors?.success ?? this._config().successColor,
+                warning: n?.severityColors?.warning ?? this._config().warningColor,
+                info: n?.severityColors?.info ?? 'sky',
+                error: n?.severityColors?.error ?? this._config().dangerColor,
+            },
+            unreadColor: n?.unreadColor ?? this._config().primaryColor,
+            size: n?.size ?? 'md',
+            borderColor: n?.borderColor ?? this._config().listBorderColor ?? this._config().primaryColor,
+            radius: n?.radius ?? this._config().borderRadius,
+            titleWeight: n?.titleWeight ?? 600,
+            detailColor: n?.detailColor,
+            groupLabelWeight: n?.groupLabelWeight ?? 700,
+        };
+    }, ...(ngDevMode ? [{ debugName: "notificationStyle" }] : /* istanbul ignore next */ []));
     /** Resolved text color for solid primary/secondary buttons — undefined means "let
      *  resolveColor() auto-pick white/dark-800 based on shade", same as today. */
     buttonTextColor(role) {
@@ -9581,6 +9603,13 @@ class ClxTabsComponent {
     _clxColor = computed(() => this.clxColor() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_clxColor" }] : /* istanbul ignore next */ []));
     _panels = contentChildren(ClxTabDirective, ...(ngDevMode ? [{ debugName: "_panels" }] : /* istanbul ignore next */ []));
     _underlineClass = computed(() => resolveColor(this._clxColor()).bg, ...(ngDevMode ? [{ debugName: "_underlineClass" }] : /* istanbul ignore next */ []));
+    _badgeClass(tabId) {
+        const active = this.activeTab() === tabId;
+        const t = resolveColor(this._clxColor());
+        return active
+            ? `ml-0.5 px-1.5 py-0.5 rounded-full text-[10px] font-bold leading-none tabular-nums ${t.bgSubtle} ${t.textSubtle}`
+            : 'ml-0.5 px-1.5 py-0.5 rounded-full text-[10px] font-bold leading-none tabular-nums bg-clx-surface-2 text-clx-text-subtle';
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxTabsComponent, isStandalone: true, selector: "clx-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, clxColor: { classPropertyName: "clxColor", publicName: "clxColor", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange" }, queries: [{ propertyName: "_panels", predicate: ClxTabDirective, isSignal: true }], ngImport: i0, template: `
     <!-- Tab bar -->
@@ -9603,6 +9632,9 @@ class ClxTabsComponent {
               <span clx-icon [name]="tab.icon" size="xs" class="shrink-0"></span>
             }
             {{ tab.label }}
+            @if (tab.badge !== undefined) {
+              <span [class]="_badgeClass(tab.id)">{{ tab.badge }}</span>
+            }
           </button>
           @if (activeTab() === tab.id) {
             <span class="absolute bottom-0 left-0 right-0 h-0.5 rounded-full {{ _underlineClass() }}"></span>
@@ -9644,6 +9676,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
               <span clx-icon [name]="tab.icon" size="xs" class="shrink-0"></span>
             }
             {{ tab.label }}
+            @if (tab.badge !== undefined) {
+              <span [class]="_badgeClass(tab.id)">{{ tab.badge }}</span>
+            }
           </button>
           @if (activeTab() === tab.id) {
             <span class="absolute bottom-0 left-0 right-0 h-0.5 rounded-full {{ _underlineClass() }}"></span>
@@ -11236,6 +11271,375 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                 }]
         }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], confirmButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "confirmButton", required: false }] }], cancelButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelButton", required: false }] }], showCancelButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCancelButton", required: false }] }], confirmClick: [{ type: i0.Output, args: ["confirmClick"] }], cancelClick: [{ type: i0.Output, args: ["cancelClick"] }] } });
 
+// ── Size map — same density-token shape as LIST_SIZE_MAP ──────────────────────
+const NOTIFICATION_SIZE_MAP = {
+    sm: { row: 'py-2', iconWrap: 'w-7 h-7', iconSize: 'xs', title: 'text-xs', detail: 'text-[11px]', time: 'text-[10px]' },
+    md: { row: 'py-2.5', iconWrap: 'w-8.5 h-8.5', iconSize: 'sm', title: 'text-[13px]', detail: 'text-xs', time: 'text-[11px]' },
+    lg: { row: 'py-3', iconWrap: 'w-10 h-10', iconSize: 'md', title: 'text-sm', detail: 'text-[13px]', time: 'text-xs' },
+};
+// ── Default icon per severity — used when an item doesn't specify its own `icon` ──
+const NOTIFICATION_SEVERITY_ICON = {
+    success: 'check_circle',
+    warning: 'notifications_active',
+    info: 'info',
+    error: 'error',
+};
+
+/** Self-contained bell trigger + floating panel — same overlay pattern as clx-profile (CDK
+ *  Overlay anchored to the trigger, no page-level backdrop), not a full-height clx-drawer. It's
+ *  "dumb" beyond that: renders whatever `items()` it's given and emits intent (itemClick/
+ *  markRead/delete/...) outward. Callers (e.g. a NotificationService backed by SSE) own fetching
+ *  and persistence — this component never calls an API itself. */
+class ClxNotificationComponent {
+    _themeSvc = inject(ClxThemeService);
+    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Optional third tab that filters items by ClxNotificationItem.category — e.g.
+     *  `{ id: 'orders', label: 'Órdenes' }`. Omit for just Todas/Sin leer. */
+    categoryTab = input(undefined, ...(ngDevMode ? [{ debugName: "categoryTab" }] : /* istanbul ignore next */ []));
+    itemClick = output();
+    markRead = output();
+    markAllRead = output();
+    delete = output();
+    deleteAllRead = output();
+    _style = this._themeSvc.notificationStyle;
+    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    // ── CDK Overlay ─────────────────────────────────────────────────────────────
+    _sso = inject(ScrollStrategyOptions);
+    _scrollStrategy = this._sso.reposition();
+    _positions = [
+        { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 8 },
+        { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -8 },
+    ];
+    _isOpen = signal(false, ...(ngDevMode ? [{ debugName: "_isOpen" }] : /* istanbul ignore next */ []));
+    _filter = signal('all', ...(ngDevMode ? [{ debugName: "_filter" }] : /* istanbul ignore next */ []));
+    _ringClass = computed(() => {
+        const t = resolveColor(this._color());
+        return `focus-visible:${t.ringBase}`;
+    }, ...(ngDevMode ? [{ debugName: "_ringClass" }] : /* istanbul ignore next */ []));
+    _panelClass = computed(() => `w-96 bg-clx-surface shadow-xl border border-clx-border-soft overflow-hidden mt-2 flex flex-col ${resolveContainerRadius(this._style().radius)}`, ...(ngDevMode ? [{ debugName: "_panelClass" }] : /* istanbul ignore next */ []));
+    _unreadCount = computed(() => this.items().filter(i => !i.read).length, ...(ngDevMode ? [{ debugName: "_unreadCount" }] : /* istanbul ignore next */ []));
+    _readCount = computed(() => this.items().filter(i => i.read).length, ...(ngDevMode ? [{ debugName: "_readCount" }] : /* istanbul ignore next */ []));
+    _tabs = computed(() => {
+        const tabs = [
+            { id: 'all', label: 'Todas', badge: this.items().length || undefined },
+            { id: 'unread', label: 'Sin leer', badge: this._unreadCount() || undefined },
+        ];
+        const category = this.categoryTab();
+        if (category)
+            tabs.push({ id: category.id, label: category.label });
+        return tabs;
+    }, ...(ngDevMode ? [{ debugName: "_tabs" }] : /* istanbul ignore next */ []));
+    _visibleItems = computed(() => {
+        const f = this._filter();
+        if (f === 'unread')
+            return this.items().filter(i => !i.read);
+        const category = this.categoryTab();
+        if (category && f === category.id)
+            return this.items().filter(i => i.category === category.id);
+        return this.items();
+    }, ...(ngDevMode ? [{ debugName: "_visibleItems" }] : /* istanbul ignore next */ []));
+    _groups = computed(() => {
+        const byLabel = new Map();
+        for (const item of this._visibleItems()) {
+            const label = this._dayLabel(item.createdAt);
+            const bucket = byLabel.get(label);
+            if (bucket)
+                bucket.push(item);
+            else
+                byLabel.set(label, [item]);
+        }
+        return Array.from(byLabel, ([label, items]) => ({ label, items }));
+    }, ...(ngDevMode ? [{ debugName: "_groups" }] : /* istanbul ignore next */ []));
+    _groupLabelClass = computed(() => {
+        const w = this._style().groupLabelWeight;
+        return `px-2 pt-3 pb-1.5 text-[11px] uppercase tracking-wide text-clx-text-subtle font-[${w}]`;
+    }, ...(ngDevMode ? [{ debugName: "_groupLabelClass" }] : /* istanbul ignore next */ []));
+    _linkClass = computed(() => resolveColor(this._color()).textSubtle, ...(ngDevMode ? [{ debugName: "_linkClass" }] : /* istanbul ignore next */ []));
+    _unreadRailClass = computed(() => resolveColor(this._style().unreadColor).bg, ...(ngDevMode ? [{ debugName: "_unreadRailClass" }] : /* istanbul ignore next */ []));
+    _unreadDotClass = computed(() => `w-1.5 h-1.5 rounded-full shrink-0 ${resolveColor(this._style().unreadColor).bg}`, ...(ngDevMode ? [{ debugName: "_unreadDotClass" }] : /* istanbul ignore next */ []));
+    _detailClass = computed(() => this._style().detailColor ? resolveColor(this._style().detailColor).textSubtle : 'text-clx-text-muted', ...(ngDevMode ? [{ debugName: "_detailClass" }] : /* istanbul ignore next */ []));
+    _titleClass(item) {
+        const weight = item.read ? 500 : this._style().titleWeight;
+        return `text-clx-text-label font-[${weight}]`;
+    }
+    _iconWrapClass(item) {
+        const c = resolveColor(this._severityColor(item.severity));
+        return `flex items-center justify-center rounded-lg shrink-0 w-8.5 h-8.5 mt-0.5 ${c.bgSubtle} ${c.textSubtle}`;
+    }
+    _defaultIcon(severity) {
+        return NOTIFICATION_SEVERITY_ICON[severity];
+    }
+    _open(item) {
+        this.itemClick.emit(item);
+        if (!item.read)
+            this.markRead.emit(item.id);
+    }
+    _toggle() { this._isOpen.update(v => !v); }
+    _close() { this._isOpen.set(false); }
+    _onKeydown(event) {
+        if (event.key === 'Escape')
+            this._close();
+    }
+    _severityColor(severity) {
+        return this._style().severityColors[severity];
+    }
+    _dayLabel(iso) {
+        const date = new Date(iso);
+        const now = new Date();
+        const startOf = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+        const diffDays = Math.round((startOf(now) - startOf(date)) / 86_400_000);
+        if (diffDays === 0)
+            return 'Hoy';
+        if (diffDays === 1)
+            return 'Ayer';
+        if (diffDays > 1 && diffDays < 7)
+            return `Hace ${diffDays} días`;
+        return date.toLocaleDateString('es-CO', { day: 'numeric', month: 'short' });
+    }
+    _timeOf(iso) {
+        return new Date(iso).toLocaleTimeString('es-CO', { hour: '2-digit', minute: '2-digit' });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxNotificationComponent, isStandalone: true, selector: "clx-notification", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, categoryTab: { classPropertyName: "categoryTab", publicName: "categoryTab", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", markRead: "markRead", markAllRead: "markAllRead", delete: "delete", deleteAllRead: "deleteAllRead" }, host: { classAttribute: "relative inline-flex items-center" }, ngImport: i0, template: `
+    <!-- Trigger -->
+    <button
+      #origin="cdkOverlayOrigin"
+      cdkOverlayOrigin
+      type="button"
+      aria-label="Notificaciones"
+      class="relative flex items-center justify-center w-9 h-9 rounded-full text-clx-text-muted hover:bg-clx-surface-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 cursor-pointer"
+      [class]="_ringClass()"
+      (click)="_toggle()">
+      <span clx-icon name="notifications" size="sm"></span>
+      @if (_unreadCount() > 0) {
+        <span clx-badge [color]="_style().unreadColor" variant="solid" size="xs" shape="circle"
+          class="absolute -top-0.5 -right-0.5">{{ _unreadCount() > 9 ? '9+' : _unreadCount() }}</span>
+      }
+    </button>
+
+    <!-- Overlay panel -->
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="_isOpen()"
+      [cdkConnectedOverlayPositions]="_positions"
+      [cdkConnectedOverlayScrollStrategy]="_scrollStrategy"
+      [cdkConnectedOverlayPush]="true"
+      (overlayOutsideClick)="_close()"
+      (overlayKeydown)="_onKeydown($event)">
+
+      <div [class]="_panelClass()">
+        <!-- Header -->
+        <div class="flex items-center justify-between gap-3 px-4 pt-4 pb-1">
+          <p class="text-base font-semibold text-clx-text-label">Notificaciones</p>
+          <div class="flex items-center gap-3">
+            @if (_unreadCount() > 0) {
+              <button type="button" class="text-xs font-semibold shrink-0" [class]="_linkClass()"
+                (click)="markAllRead.emit()">
+                Marcar todo leído
+              </button>
+            }
+            <button type="button" class="w-6 h-6 flex items-center justify-center rounded-md text-clx-text-muted hover:bg-clx-surface-2"
+              aria-label="Cerrar" (click)="_close()">
+              <span clx-icon name="close" size="xs"></span>
+            </button>
+          </div>
+        </div>
+
+        <!-- Tabs -->
+        <div class="px-4">
+          <clx-tabs [tabs]="_tabs()" [(activeTab)]="_filter" [clxColor]="_color()" />
+        </div>
+
+        <!-- List -->
+        <div class="max-h-105 overflow-y-auto px-2 pb-2">
+          @if (_groups().length) {
+            @for (group of _groups(); track group.label) {
+              <p [class]="_groupLabelClass()">{{ group.label }}</p>
+              @for (item of group.items; track item.id) {
+                <div
+                  class="group relative flex items-start gap-3 pl-3 pr-2 rounded-lg cursor-pointer hover:bg-clx-surface-2 py-2.5"
+                  role="button"
+                  tabindex="0"
+                  (click)="_open(item)"
+                  (keydown.enter)="_open(item)">
+
+                  <span class="absolute left-0.5 top-1 bottom-1 w-0.75 rounded-full {{ item.read ? '' : _unreadRailClass() }}"></span>
+
+                  <span [class]="_iconWrapClass(item)">
+                    <span clx-icon [name]="item.icon || _defaultIcon(item.severity)" size="sm"></span>
+                  </span>
+
+                  <div class="flex-1 min-w-0">
+                    <p class="flex items-baseline gap-1.5 text-sm" [class]="_titleClass(item)">
+                      @if (!item.read) {
+                        <span [class]="_unreadDotClass()"></span>
+                      }
+                      <span class="truncate">{{ item.title }}</span>
+                    </p>
+                    @if (item.detail) {
+                      <p class="mt-0.5 text-sm line-clamp-2" [class]="_detailClass()">{{ item.detail }}</p>
+                    }
+                    <p class="mt-1 text-xs text-clx-text-subtle tabular-nums">{{ _timeOf(item.createdAt) }}</p>
+                  </div>
+
+                  <button type="button"
+                    class="opacity-0 group-hover:opacity-100 focus-visible:opacity-100 transition-opacity shrink-0 rounded-md p-1 text-clx-text-subtle hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-950"
+                    aria-label="Eliminar notificación"
+                    (click)="$event.stopPropagation(); delete.emit(item.id)">
+                    <span clx-icon name="close" size="xs"></span>
+                  </button>
+                </div>
+              }
+            }
+          } @else {
+            <div class="flex flex-col items-center justify-center gap-2 py-14 text-center">
+              <span clx-icon name="notifications_off" size="xl" class="text-clx-text-subtle"></span>
+              <p class="text-sm font-medium text-clx-text-label">
+                {{ _filter() === 'unread' ? 'No tienes notificaciones sin leer' : 'No hay notificaciones' }}
+              </p>
+            </div>
+          }
+        </div>
+
+        @if (_readCount() > 0) {
+          <div class="flex justify-end px-4 py-2.5 border-t border-clx-border-soft">
+            <button type="button" class="text-xs font-semibold text-clx-text-subtle hover:text-red-500"
+              (click)="deleteAllRead.emit()">
+              Eliminar leídas
+            </button>
+          </div>
+        }
+      </div>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "component", type: ClxBadgeComponent, selector: "span[clx-badge]", inputs: ["variant", "color", "size", "shape", "positioned"] }, { kind: "component", type: ClxTabsComponent, selector: "clx-tabs", inputs: ["tabs", "clxColor", "activeTab"], outputs: ["activeTabChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxNotificationComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clx-notification',
+                    standalone: true,
+                    imports: [OverlayModule, ClxIconComponent, ClxBadgeComponent, ClxTabsComponent],
+                    template: `
+    <!-- Trigger -->
+    <button
+      #origin="cdkOverlayOrigin"
+      cdkOverlayOrigin
+      type="button"
+      aria-label="Notificaciones"
+      class="relative flex items-center justify-center w-9 h-9 rounded-full text-clx-text-muted hover:bg-clx-surface-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 cursor-pointer"
+      [class]="_ringClass()"
+      (click)="_toggle()">
+      <span clx-icon name="notifications" size="sm"></span>
+      @if (_unreadCount() > 0) {
+        <span clx-badge [color]="_style().unreadColor" variant="solid" size="xs" shape="circle"
+          class="absolute -top-0.5 -right-0.5">{{ _unreadCount() > 9 ? '9+' : _unreadCount() }}</span>
+      }
+    </button>
+
+    <!-- Overlay panel -->
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="_isOpen()"
+      [cdkConnectedOverlayPositions]="_positions"
+      [cdkConnectedOverlayScrollStrategy]="_scrollStrategy"
+      [cdkConnectedOverlayPush]="true"
+      (overlayOutsideClick)="_close()"
+      (overlayKeydown)="_onKeydown($event)">
+
+      <div [class]="_panelClass()">
+        <!-- Header -->
+        <div class="flex items-center justify-between gap-3 px-4 pt-4 pb-1">
+          <p class="text-base font-semibold text-clx-text-label">Notificaciones</p>
+          <div class="flex items-center gap-3">
+            @if (_unreadCount() > 0) {
+              <button type="button" class="text-xs font-semibold shrink-0" [class]="_linkClass()"
+                (click)="markAllRead.emit()">
+                Marcar todo leído
+              </button>
+            }
+            <button type="button" class="w-6 h-6 flex items-center justify-center rounded-md text-clx-text-muted hover:bg-clx-surface-2"
+              aria-label="Cerrar" (click)="_close()">
+              <span clx-icon name="close" size="xs"></span>
+            </button>
+          </div>
+        </div>
+
+        <!-- Tabs -->
+        <div class="px-4">
+          <clx-tabs [tabs]="_tabs()" [(activeTab)]="_filter" [clxColor]="_color()" />
+        </div>
+
+        <!-- List -->
+        <div class="max-h-105 overflow-y-auto px-2 pb-2">
+          @if (_groups().length) {
+            @for (group of _groups(); track group.label) {
+              <p [class]="_groupLabelClass()">{{ group.label }}</p>
+              @for (item of group.items; track item.id) {
+                <div
+                  class="group relative flex items-start gap-3 pl-3 pr-2 rounded-lg cursor-pointer hover:bg-clx-surface-2 py-2.5"
+                  role="button"
+                  tabindex="0"
+                  (click)="_open(item)"
+                  (keydown.enter)="_open(item)">
+
+                  <span class="absolute left-0.5 top-1 bottom-1 w-0.75 rounded-full {{ item.read ? '' : _unreadRailClass() }}"></span>
+
+                  <span [class]="_iconWrapClass(item)">
+                    <span clx-icon [name]="item.icon || _defaultIcon(item.severity)" size="sm"></span>
+                  </span>
+
+                  <div class="flex-1 min-w-0">
+                    <p class="flex items-baseline gap-1.5 text-sm" [class]="_titleClass(item)">
+                      @if (!item.read) {
+                        <span [class]="_unreadDotClass()"></span>
+                      }
+                      <span class="truncate">{{ item.title }}</span>
+                    </p>
+                    @if (item.detail) {
+                      <p class="mt-0.5 text-sm line-clamp-2" [class]="_detailClass()">{{ item.detail }}</p>
+                    }
+                    <p class="mt-1 text-xs text-clx-text-subtle tabular-nums">{{ _timeOf(item.createdAt) }}</p>
+                  </div>
+
+                  <button type="button"
+                    class="opacity-0 group-hover:opacity-100 focus-visible:opacity-100 transition-opacity shrink-0 rounded-md p-1 text-clx-text-subtle hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-950"
+                    aria-label="Eliminar notificación"
+                    (click)="$event.stopPropagation(); delete.emit(item.id)">
+                    <span clx-icon name="close" size="xs"></span>
+                  </button>
+                </div>
+              }
+            }
+          } @else {
+            <div class="flex flex-col items-center justify-center gap-2 py-14 text-center">
+              <span clx-icon name="notifications_off" size="xl" class="text-clx-text-subtle"></span>
+              <p class="text-sm font-medium text-clx-text-label">
+                {{ _filter() === 'unread' ? 'No tienes notificaciones sin leer' : 'No hay notificaciones' }}
+              </p>
+            </div>
+          }
+        </div>
+
+        @if (_readCount() > 0) {
+          <div class="flex justify-end px-4 py-2.5 border-t border-clx-border-soft">
+            <button type="button" class="text-xs font-semibold text-clx-text-subtle hover:text-red-500"
+              (click)="deleteAllRead.emit()">
+              Eliminar leídas
+            </button>
+          </div>
+        }
+      </div>
+    </ng-template>
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'relative inline-flex items-center' },
+                }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], categoryTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "categoryTab", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], markRead: [{ type: i0.Output, args: ["markRead"] }], markAllRead: [{ type: i0.Output, args: ["markAllRead"] }], delete: [{ type: i0.Output, args: ["delete"] }], deleteAllRead: [{ type: i0.Output, args: ["deleteAllRead"] }] } });
+
 // ─── CDK overlay token (carries the resolved ref into the component) ──────────
 const CLX_ALERT_OPTIONS = new InjectionToken('CLX_ALERT_OPTIONS');
 const CLX_ALERT_RESOLVE = new InjectionToken('CLX_ALERT_RESOLVE');
@@ -17065,5 +17469,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CLX_ADDON_BORDER, CLX_ADDON_TEXT, CLX_ALERT_OPTIONS, CLX_ALERT_RESOLVE, CLX_BG_ADDON, CLX_BG_DISABLED, CLX_BG_ICON_WRAP, CLX_BG_SECTION, CLX_BG_SURFACE, CLX_BORDER_DEFAULT, CLX_BORDER_DISABLED, CLX_BORDER_MEDIUM, CLX_COLOR_HEX, CLX_COLOR_HEX_100, CLX_COLOR_MAP, CLX_FONT_CATALOG, CLX_MODAL_ANIM_CONFIG, CLX_MODAL_DATA, CLX_MODAL_REF, CLX_OPTION_DISABLED, CLX_PLACEHOLDER, CLX_RADIO_GROUP, CLX_RADIUS_MAP, CLX_TEXT_BODY, CLX_TEXT_DISABLED, CLX_TEXT_HEADING, CLX_TEXT_HINT, CLX_TEXT_IDLE, CLX_TEXT_INPUT, CLX_TEXT_LABEL, CLX_TEXT_OPTION, CLX_TEXT_SUBTITLE, CLX_TEXT_TITLE, CLX_THEME_CONFIG, CLX_THEME_DEFAULTS, CLX_TOAST_DEFAULTS, ClxAlertComponent, ClxAlertService, ClxAnimateDirective, ClxAnimateGroupDirective, ClxAnimateService, ClxAppLayoutComponent, ClxAvatarComponent, ClxBadgeComponent, ClxBrandComponent, ClxButtonComponent, ClxButtonGroupComponent, ClxCardBodyDirective, ClxCardComponent, ClxCardFooterDirective, ClxCardHeaderActionsDirective, ClxCardHeaderDirective, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxCheckboxComponent, ClxCollapseComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorLinkModalComponent, ClxFabComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxMenuItemTrailingDirective, ClxModalComponent, ClxModalService, ClxNativeOverlayService, ClxNavGroupComponent, ClxNumberComponent, ClxOtpComponent, ClxPageEmptyComponent, ClxPageHeaderComponent, ClxPageHeaderTitleDirective, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProductQuickViewComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRatingComponent, ClxSearchComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSocialIconComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableActionsComponent, ClxTableComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxThemeService, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWishlistComponent, ClxWizardComponent, TIMEPICKER_SIZE_MAP, parseColorInput, provideCodexlyTheme, resolveColor, resolveContainerRadius, resolveRadius };
+export { CLX_ADDON_BORDER, CLX_ADDON_TEXT, CLX_ALERT_OPTIONS, CLX_ALERT_RESOLVE, CLX_BG_ADDON, CLX_BG_DISABLED, CLX_BG_ICON_WRAP, CLX_BG_SECTION, CLX_BG_SURFACE, CLX_BORDER_DEFAULT, CLX_BORDER_DISABLED, CLX_BORDER_MEDIUM, CLX_COLOR_HEX, CLX_COLOR_HEX_100, CLX_COLOR_MAP, CLX_FONT_CATALOG, CLX_MODAL_ANIM_CONFIG, CLX_MODAL_DATA, CLX_MODAL_REF, CLX_OPTION_DISABLED, CLX_PLACEHOLDER, CLX_RADIO_GROUP, CLX_RADIUS_MAP, CLX_TEXT_BODY, CLX_TEXT_DISABLED, CLX_TEXT_HEADING, CLX_TEXT_HINT, CLX_TEXT_IDLE, CLX_TEXT_INPUT, CLX_TEXT_LABEL, CLX_TEXT_OPTION, CLX_TEXT_SUBTITLE, CLX_TEXT_TITLE, CLX_THEME_CONFIG, CLX_THEME_DEFAULTS, CLX_TOAST_DEFAULTS, ClxAlertComponent, ClxAlertService, ClxAnimateDirective, ClxAnimateGroupDirective, ClxAnimateService, ClxAppLayoutComponent, ClxAvatarComponent, ClxBadgeComponent, ClxBrandComponent, ClxButtonComponent, ClxButtonGroupComponent, ClxCardBodyDirective, ClxCardComponent, ClxCardFooterDirective, ClxCardHeaderActionsDirective, ClxCardHeaderDirective, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxCheckboxComponent, ClxCollapseComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorLinkModalComponent, ClxFabComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxMenuItemTrailingDirective, ClxModalComponent, ClxModalService, ClxNativeOverlayService, ClxNavGroupComponent, ClxNotificationComponent, ClxNumberComponent, ClxOtpComponent, ClxPageEmptyComponent, ClxPageHeaderComponent, ClxPageHeaderTitleDirective, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProductQuickViewComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRatingComponent, ClxSearchComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSocialIconComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableActionsComponent, ClxTableComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxThemeService, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWishlistComponent, ClxWizardComponent, TIMEPICKER_SIZE_MAP, parseColorInput, provideCodexlyTheme, resolveColor, resolveContainerRadius, resolveRadius };
 //# sourceMappingURL=codexly-ui.mjs.map