codexly-ui 0.11.0 → 0.11.1

package/fesm2022/codexly-ui.mjs

@@ -9603,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 -->
@@ -9625,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>
@@ -9666,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>
@@ -11272,29 +11285,60 @@ const NOTIFICATION_SEVERITY_ICON = {
     error: 'error',
 };
 
-/** "Dumb" panel: renders whatever list of items it's given via `items()` and emits intent
- *  (itemClick/markRead/markAllRead/delete/deleteAllRead) outward — it never fetches, persists,
- *  or connects to a real-time source itself. Callers (e.g. codexly-app's NotificationService,
- *  backed by SSE) own that and just feed the current list in. Meant to be projected inside
- *  clx-drawer's body, same as any other content. */
+/** 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 */ []));
-    size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* 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();
-    _filter = signal('all', ...(ngDevMode ? [{ debugName: "_filter" }] : /* istanbul ignore next */ []));
     _style = this._themeSvc.notificationStyle;
     _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
-    _resolvedSize = computed(() => this.size() ?? this._style().size, ...(ngDevMode ? [{ debugName: "_resolvedSize" }] : /* istanbul ignore next */ []));
-    _sizeTokens = computed(() => NOTIFICATION_SIZE_MAP[this._resolvedSize()], ...(ngDevMode ? [{ debugName: "_sizeTokens" }] : /* 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 */ []));
-    _visibleItems = computed(() => this._filter() === 'unread' ? this.items().filter(i => !i.read) : this.items(), ...(ngDevMode ? [{ debugName: "_visibleItems" }] : /* 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()) {
@@ -11307,10 +11351,9 @@ class ClxNotificationComponent {
         }
         return Array.from(byLabel, ([label, items]) => ({ label, items }));
     }, ...(ngDevMode ? [{ debugName: "_groups" }] : /* istanbul ignore next */ []));
-    _wrapClass = computed(() => `flex flex-col ${resolveContainerRadius(this._style().radius)}`, ...(ngDevMode ? [{ debugName: "_wrapClass" }] : /* istanbul ignore next */ []));
     _groupLabelClass = computed(() => {
         const w = this._style().groupLabelWeight;
-        return `px-1 pt-3 pb-1.5 text-[11px] uppercase tracking-wide text-clx-text-subtle font-[${w}]`;
+        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 */ []));
@@ -11322,7 +11365,7 @@ class ClxNotificationComponent {
     }
     _iconWrapClass(item) {
         const c = resolveColor(this._severityColor(item.severity));
-        return `flex items-center justify-center rounded-lg shrink-0 ${c.bgSubtle} ${c.textSubtle} ${this._sizeTokens().iconWrap}`;
+        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];
@@ -11332,11 +11375,11 @@ class ClxNotificationComponent {
         if (!item.read)
             this.markRead.emit(item.id);
     }
-    _countBadgeClass(tab) {
-        const active = this._filter() === tab;
-        return active
-            ? 'ml-0.5 text-[10px] font-bold tabular-nums'
-            : 'ml-0.5 text-[10px] font-bold tabular-nums text-clx-text-subtle';
+    _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];
@@ -11358,199 +11401,244 @@ class ClxNotificationComponent {
         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 }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", markRead: "markRead", markAllRead: "markAllRead", delete: "delete", deleteAllRead: "deleteAllRead" }, ngImport: i0, template: `
-    <div [class]="_wrapClass()">
-      <!-- Filter -->
-      <div class="flex items-center gap-2 px-1 pb-3">
-        <button clx-button type="button" size="xs" shape="pill"
-          [variant]="_filter() === 'all' ? 'solid' : 'ghost'"
-          [color]="_filter() === 'all' ? _color() : 'slate'"
-          (click)="_filter.set('all')">
-          Todas
-          @if (items().length) {
-            <span [class]="_countBadgeClass('all')">{{ items().length }}</span>
-          }
-        </button>
-        <button clx-button type="button" size="xs" shape="pill"
-          [variant]="_filter() === 'unread' ? 'solid' : 'ghost'"
-          [color]="_filter() === 'unread' ? _color() : 'slate'"
-          (click)="_filter.set('unread')">
-          Sin leer
-          @if (_unreadCount() > 0) {
-            <span [class]="_countBadgeClass('unread')">{{ _unreadCount() }}</span>
-          }
-        </button>
-        <div class="flex-1"></div>
-        @if (_unreadCount() > 0) {
-          <button type="button" class="text-xs font-semibold shrink-0" [class]="_linkClass()"
-            (click)="markAllRead.emit()">
-            Marcar todo leído
-          </button>
-        }
-        @if (_readCount() > 0) {
-          <button type="button" class="text-xs font-semibold shrink-0 text-clx-text-subtle hover:text-red-500"
-            (click)="deleteAllRead.emit()">
-            Eliminar leídas
-          </button>
-        }
-      </div>
+    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>
 
-      <!-- List -->
-      @if (_groups().length) {
-        <div class="flex flex-col">
-          @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 px-1 rounded-lg cursor-pointer hover:bg-clx-surface-2 {{ _sizeTokens().row }}"
-                role="button"
-                tabindex="0"
-                (click)="_open(item)"
-                (keydown.enter)="_open(item)">
-
-                <span class="absolute left-0 top-1.5 bottom-1.5 w-[3px] rounded-full {{ item.read ? '' : _unreadRailClass() }}"></span>
-
-                <span [class]="_iconWrapClass(item)">
-                  <span clx-icon [name]="item.icon || _defaultIcon(item.severity)" [size]="_sizeTokens().iconSize"></span>
-                </span>
+    <!-- Overlay panel -->
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="_isOpen()"
+      [cdkConnectedOverlayPositions]="_positions"
+      [cdkConnectedOverlayScrollStrategy]="_scrollStrategy"
+      [cdkConnectedOverlayPush]="true"
+      (overlayOutsideClick)="_close()"
+      (overlayKeydown)="_onKeydown($event)">
 
-                <div class="flex-1 min-w-0 pl-1.5">
-                  <p class="flex items-baseline gap-1.5 {{ _sizeTokens().title }}" [class]="_titleClass(item)">
-                    @if (!item.read) {
-                      <span [class]="_unreadDotClass()"></span>
+      <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>
                     }
-                    <span class="truncate">{{ item.title }}</span>
-                  </p>
-                  @if (item.detail) {
-                    <p class="mt-0.5 line-clamp-2 {{ _sizeTokens().detail }}" [class]="_detailClass()">{{ item.detail }}</p>
-                  }
-                </div>
+                    <p class="mt-1 text-xs text-clx-text-subtle tabular-nums">{{ _timeOf(item.createdAt) }}</p>
+                  </div>
 
-                <div class="flex flex-col items-end gap-1 shrink-0 pl-2">
-                  <span class="text-clx-text-subtle tabular-nums {{ _sizeTokens().time }}">{{ _timeOf(item.createdAt) }}</span>
                   <button type="button"
-                    class="opacity-0 group-hover:opacity-100 focus-visible:opacity-100 transition-opacity rounded-md p-0.5 text-clx-text-subtle hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-950"
+                    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>
-              </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>
-      } @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>
-  `, isInline: true, dependencies: [{ kind: "component", type: ClxButtonComponent, selector: "button[clx-button], a[clx-button]", inputs: ["variant", "color", "textColor", "size", "shape", "loading", "disabled", "block", "icon", "iconPosition", "iconOnly", "badge", "badgeColor"] }, { kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+
+        @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: [ClxButtonComponent, ClxIconComponent],
+                    imports: [OverlayModule, ClxIconComponent, ClxBadgeComponent, ClxTabsComponent],
                     template: `
-    <div [class]="_wrapClass()">
-      <!-- Filter -->
-      <div class="flex items-center gap-2 px-1 pb-3">
-        <button clx-button type="button" size="xs" shape="pill"
-          [variant]="_filter() === 'all' ? 'solid' : 'ghost'"
-          [color]="_filter() === 'all' ? _color() : 'slate'"
-          (click)="_filter.set('all')">
-          Todas
-          @if (items().length) {
-            <span [class]="_countBadgeClass('all')">{{ items().length }}</span>
-          }
-        </button>
-        <button clx-button type="button" size="xs" shape="pill"
-          [variant]="_filter() === 'unread' ? 'solid' : 'ghost'"
-          [color]="_filter() === 'unread' ? _color() : 'slate'"
-          (click)="_filter.set('unread')">
-          Sin leer
-          @if (_unreadCount() > 0) {
-            <span [class]="_countBadgeClass('unread')">{{ _unreadCount() }}</span>
-          }
-        </button>
-        <div class="flex-1"></div>
-        @if (_unreadCount() > 0) {
-          <button type="button" class="text-xs font-semibold shrink-0" [class]="_linkClass()"
-            (click)="markAllRead.emit()">
-            Marcar todo leído
-          </button>
-        }
-        @if (_readCount() > 0) {
-          <button type="button" class="text-xs font-semibold shrink-0 text-clx-text-subtle hover:text-red-500"
-            (click)="deleteAllRead.emit()">
-            Eliminar leídas
-          </button>
-        }
-      </div>
+    <!-- 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>
 
-      <!-- List -->
-      @if (_groups().length) {
-        <div class="flex flex-col">
-          @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 px-1 rounded-lg cursor-pointer hover:bg-clx-surface-2 {{ _sizeTokens().row }}"
-                role="button"
-                tabindex="0"
-                (click)="_open(item)"
-                (keydown.enter)="_open(item)">
-
-                <span class="absolute left-0 top-1.5 bottom-1.5 w-[3px] rounded-full {{ item.read ? '' : _unreadRailClass() }}"></span>
-
-                <span [class]="_iconWrapClass(item)">
-                  <span clx-icon [name]="item.icon || _defaultIcon(item.severity)" [size]="_sizeTokens().iconSize"></span>
-                </span>
+    <!-- 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>
 
-                <div class="flex-1 min-w-0 pl-1.5">
-                  <p class="flex items-baseline gap-1.5 {{ _sizeTokens().title }}" [class]="_titleClass(item)">
-                    @if (!item.read) {
-                      <span [class]="_unreadDotClass()"></span>
+        <!-- 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>
                     }
-                    <span class="truncate">{{ item.title }}</span>
-                  </p>
-                  @if (item.detail) {
-                    <p class="mt-0.5 line-clamp-2 {{ _sizeTokens().detail }}" [class]="_detailClass()">{{ item.detail }}</p>
-                  }
-                </div>
+                    <p class="mt-1 text-xs text-clx-text-subtle tabular-nums">{{ _timeOf(item.createdAt) }}</p>
+                  </div>
 
-                <div class="flex flex-col items-end gap-1 shrink-0 pl-2">
-                  <span class="text-clx-text-subtle tabular-nums {{ _sizeTokens().time }}">{{ _timeOf(item.createdAt) }}</span>
                   <button type="button"
-                    class="opacity-0 group-hover:opacity-100 focus-visible:opacity-100 transition-opacity rounded-md p-0.5 text-clx-text-subtle hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-950"
+                    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>
-              </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>
-      } @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 }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", 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"] }] } });
+        }], 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');