@caribeng/ui 22.2.0 → 22.5.0

package/fesm2022/caribeng-ui-notification-center.mjs

@@ -0,0 +1,636 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, Injector, ViewContainerRef, model, input, booleanAttribute, numberAttribute, output, computed, signal, viewChild, effect, untracked, afterNextRender, DestroyRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { Overlay } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { injectCbTranslation, cbFormat, cbRelativeTime } from '@caribeng/ui';
+import { CbAvatar } from '@caribeng/ui/avatar';
+import { CbIconRegistry, CbIcon } from '@caribeng/ui/icon';
+import { bellOff, checkCheck } from '@caribeng/ui/icons';
+
+function toTime(date) {
+    const t = (date instanceof Date ? date : new Date(date)).getTime();
+    return Number.isNaN(t) ? 0 : t;
+}
+/** Inicio del día local de `time`. */
+function startOfDay(time) {
+    const d = new Date(time);
+    d.setHours(0, 0, 0, 0);
+    return d.getTime();
+}
+/**
+ * Notificaciones de la más reciente a la más antigua, filtradas y (con `group`) repartidas en
+ * Hoy, Ayer y Anteriores. Sin agrupar devuelve un único grupo `earlier`.
+ */
+function groupNotifications(list, filter, group, now) {
+    const items = list.filter((n) => filter === 'all' || !n.read).sort((a, b) => toTime(b.date) - toTime(a.date));
+    if (!group)
+        return items.length ? [{ key: 'earlier', items }] : [];
+    const today = startOfDay(now);
+    const yesterday = today - 86_400_000;
+    const buckets = { today: [], yesterday: [], earlier: [] };
+    for (const n of items) {
+        const t = toTime(n.date);
+        buckets[t >= today ? 'today' : t >= yesterday ? 'yesterday' : 'earlier'].push(n);
+    }
+    return ['today', 'yesterday', 'earlier'].filter((k) => buckets[k].length).map((key) => ({ key, items: buckets[key] }));
+}
+/** Contador del botón: "99+" a partir de `max`. */
+function badgeText(count, max) {
+    return count > max ? `${max}+` : String(count);
+}
+/** Iniciales de un nombre ("Ana López" → "AL"). */
+function initialsOf(name) {
+    const parts = name.trim().split(/\s+/).filter(Boolean);
+    return ((parts[0]?.[0] ?? '') + (parts.length > 1 ? parts[parts.length - 1][0] : '')).toUpperCase();
+}
+
+const SEVERITY_ICON = {
+    info: 'info',
+    success: 'circle-check',
+    warning: 'triangle-alert',
+    danger: 'circle-x',
+};
+let nextUid = 0;
+/**
+ * Centro de notificaciones de CaribeNG: campana con el número de avisos sin leer que abre un
+ * panel con la lista agrupada por fecha (Hoy, Ayer, Anteriores), filtro Todas / No leídas,
+ * marcar como leída (una o todas), eliminar y acciones propias en cada aviso. Con `inline` el
+ * panel se pinta en la página, sin campana.
+ *
+ * @example
+ * ```html
+ * <cb-notification-center [(notifications)]="avisos" (itemClick)="abrir($event)" />
+ * ```
+ */
+class CbNotificationCenter {
+    constructor() {
+        this.t = injectCbTranslation();
+        this.fmt = cbFormat;
+        this.host = inject(ElementRef);
+        this.injector = inject(Injector);
+        this.overlay = inject(Overlay);
+        this.vcr = inject(ViewContainerRef);
+        this.panelId = `cb-nc-${++nextUid}`;
+        /** Avisos (el panel los ordena del más reciente al más antiguo). Se actualiza al leer o eliminar. */
+        this.notifications = model([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "notifications" }] : /* istanbul ignore next */ []));
+        /** Todas o solo las no leídas. */
+        this.filter = model('all', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
+        /** Panel abierto (sin `inline`). */
+        this.open = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+        /** Pinta el panel en la página, sin campana ni ventana flotante. */
+        this.inline = input(false, { ...(ngDevMode ? { debugName: "inline" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Agrupa por fecha: Hoy, Ayer y Anteriores. */
+        this.groupByDate = input(true, { ...(ngDevMode ? { debugName: "groupByDate" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Muestra el botón de eliminar en cada aviso. */
+        this.removable = input(true, { ...(ngDevMode ? { debugName: "removable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Cierra el panel al elegir un aviso. */
+        this.closeOnSelect = input(true, { ...(ngDevMode ? { debugName: "closeOnSelect" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Anuncia a los lectores de pantalla los avisos nuevos sin leer. Si la misma lista se muestra en
+         * dos centros (la campana y una página), desactívalo en uno para no oírlo dos veces.
+         */
+        this.announceNew = input(true, { ...(ngDevMode ? { debugName: "announceNew" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Muestra el pie con "Ver todas" (`viewAll`). */
+        this.showViewAll = input(false, { ...(ngDevMode ? { debugName: "showViewAll" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** A partir de este número, la campana muestra "99+". */
+        this.max = input(99, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /** Título del panel (por defecto, "Notificaciones"). No es `title` para no dar un tooltip al componente. */
+        this.heading = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
+        /** Nivel del título (los grupos usan el siguiente). */
+        this.headingLevel = input(2, { ...(ngDevMode ? { debugName: "headingLevel" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        this.emptyMessage = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+        this.panelWidth = input('24rem', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "panelWidth" }] : /* istanbul ignore next */ []));
+        /** Alto máximo de la lista (con scroll). */
+        this.maxHeight = input('26rem', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []));
+        /** Aviso elegido (ya marcado como leído). */
+        this.itemClick = output();
+        this.actionClick = output();
+        /** Un aviso pasó a leído (`read: true`) o a no leído. */
+        this.readChange = output();
+        this.markAll = output();
+        this.itemRemove = output();
+        this.viewAll = output();
+        this.unread = computed(() => this.notifications().filter((n) => !n.read).length, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "unread" }] : /* istanbul ignore next */ []));
+        this.badge = computed(() => badgeText(this.unread(), this.max()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []));
+        this.bellLabel = computed(() => {
+            const t = this.t();
+            return this.unread() ? cbFormat(t.notificationsBellUnread, this.unread()) : t.notificationsTitle;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "bellLabel" }] : /* istanbul ignore next */ []));
+        this.now = signal(Date.now(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "now" }] : /* istanbul ignore next */ []));
+        this.groups = computed(() => groupNotifications(this.notifications(), this.filter(), this.groupByDate(), this.now()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+        this.announcement = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
+        this.panelTpl = viewChild.required('panelTpl');
+        this.bell = viewChild('bell', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "bell" }] : /* istanbul ignore next */ []));
+        this.overlayRef = null;
+        /** El foco está (o estaba, si su elemento desapareció) dentro del panel. */
+        this.focusInside = false;
+        this.positions = [
+            { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 8 },
+            { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 8 },
+            { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -8 },
+        ];
+        this.announceFlip = false;
+        const registry = inject(CbIconRegistry);
+        for (const [name, body] of Object.entries({ 'check-check': checkCheck, 'bell-off': bellOff })) {
+            if (!registry.has(name))
+                registry.register({ [name]: body });
+        }
+        // Abrir y cerrar el panel flotante cuando cambia `open` (también desde fuera).
+        effect(() => {
+            const open = this.open() && !this.inline();
+            untracked(() => (open ? this.attach() : this.detach()));
+        });
+        // Foco: al título del panel al abrir. Al cerrar, si el foco se quedó en ninguna parte (estaba
+        // en el panel, que ya no existe), vuelve a la campana; no se usa "el elemento enfocado antes"
+        // porque Safari no enfoca un botón al pulsarlo.
+        let wasOpen = false;
+        effect(() => {
+            const open = this.open() && !this.inline();
+            if (open === wasOpen)
+                return;
+            wasOpen = open;
+            afterNextRender(() => {
+                if (open) {
+                    this.overlayRef?.overlayElement.querySelector('.cb-nc__title')?.focus();
+                }
+                else {
+                    const active = this.host.nativeElement.ownerDocument.activeElement;
+                    if (!active || active === active.ownerDocument.body)
+                        this.bell()?.nativeElement.focus();
+                }
+            }, { injector: this.injector });
+        });
+        // Anuncia los avisos nuevos sin leer (no los que ya estaban al empezar).
+        let known = null;
+        effect(() => {
+            const list = this.notifications();
+            const ids = new Set(list.map((n) => n.id));
+            if (known) {
+                const fresh = list.filter((n) => !n.read && !known.has(n.id));
+                if (fresh.length && untracked(this.announceNew)) {
+                    untracked(() => this.announce(fresh.length === 1 ? cbFormat(this.t().notificationsNew, fresh[0].title) : cbFormat(this.t().notificationsNewMany, fresh.length)));
+                }
+            }
+            known = ids;
+            // Si la app quitó el aviso que tenía el foco (p. ej. tras una acción), el foco vuelve al título.
+            afterNextRender(() => {
+                const active = this.host.nativeElement.ownerDocument.activeElement;
+                if (this.focusInside && (!active || active === active.ownerDocument.body)) {
+                    this.panelRoot()?.querySelector(`#${this.panelId}-title`)?.focus();
+                }
+            }, { injector: this.injector });
+        });
+        const destroyRef = inject(DestroyRef);
+        afterNextRender(() => {
+            const timer = setInterval(() => this.now.set(Date.now()), 60_000);
+            destroyRef.onDestroy(() => clearInterval(timer));
+        });
+        destroyRef.onDestroy(() => this.detach());
+    }
+    // --- API pública ---
+    toggle() {
+        this.open.update((o) => !o);
+    }
+    show() {
+        this.open.set(true);
+    }
+    hide() {
+        this.open.set(false);
+    }
+    // --- Plantilla ---
+    initials(name) {
+        return initialsOf(name);
+    }
+    iconOf(n) {
+        return n.icon || SEVERITY_ICON[n.severity ?? 'info'];
+    }
+    groupLabel(key) {
+        const t = this.t();
+        return key === 'today' ? t.notificationsToday : key === 'yesterday' ? t.notificationsYesterday : t.notificationsEarlier;
+    }
+    itemId(n) {
+        return `${this.panelId}-${n.id.replace(/[^\w-]/g, '_')}`;
+    }
+    iso(date) {
+        const time = toTime(date);
+        return time ? new Date(time).toISOString() : '';
+    }
+    full(date) {
+        const time = toTime(date);
+        return time ? new Intl.DateTimeFormat(this.t().intlLocale, { dateStyle: 'full', timeStyle: 'short' }).format(time) : '';
+    }
+    rel(date) {
+        const time = toTime(date);
+        return time ? cbRelativeTime(time, this.now(), this.t().intlLocale, this.t().notificationsJustNow) : '';
+    }
+    // --- Acciones ---
+    select(n) {
+        const item = n.read ? n : this.patch(n, { read: true });
+        if (!n.read)
+            this.readChange.emit(item);
+        this.itemClick.emit(item);
+        if (this.closeOnSelect() && !this.inline())
+            this.hide();
+    }
+    runAction(n, action) {
+        const item = n.read ? n : this.patch(n, { read: true });
+        if (!n.read)
+            this.readChange.emit(item);
+        this.actionClick.emit({ notification: item, action });
+    }
+    setRead(n, read) {
+        const item = this.patch(n, { read });
+        this.readChange.emit(item);
+        this.announce(read ? this.t().notificationsMarkedRead : this.t().notificationsMarkedUnread);
+        // Con el filtro "No leídas", el aviso desaparece: el foco pasa al siguiente.
+        if (read && this.filter() === 'unread')
+            this.focusAfterRemoval(n);
+    }
+    markAllRead() {
+        if (!this.unread())
+            return;
+        this.notifications.update((list) => list.map((n) => (n.read ? n : { ...n, read: true })));
+        this.markAll.emit();
+        this.announce(this.t().notificationsMarkedAllRead);
+        this.focusLater(`#${this.panelId}-title`);
+    }
+    remove(n) {
+        this.focusAfterRemoval(n);
+        this.notifications.update((list) => list.filter((x) => x.id !== n.id));
+        this.itemRemove.emit(n);
+        this.announce(this.t().notificationsRemoved);
+    }
+    onViewAll() {
+        this.viewAll.emit();
+        if (!this.inline())
+            this.hide();
+    }
+    /** Escape cierra; Tab fuera del panel lo cierra y devuelve el foco a la campana. */
+    onPanelKeydown(event) {
+        if (this.inline())
+            return;
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.hide();
+        }
+        else if (event.key === 'Tab') {
+            const panel = event.currentTarget;
+            const focusables = Array.from(panel.querySelectorAll('button:not(:disabled), [href], [tabindex="0"]'));
+            const first = focusables[0];
+            const last = focusables[focusables.length - 1];
+            const active = panel.ownerDocument.activeElement;
+            if ((!event.shiftKey && active === last) || (event.shiftKey && (active === first || active === panel.querySelector('.cb-nc__title')))) {
+                event.preventDefault();
+                this.hide();
+            }
+        }
+    }
+    /** Sale el foco hacia otro elemento de la página (no cuando su elemento desaparece). */
+    onPanelFocusOut(event) {
+        const next = event.relatedTarget;
+        if (next && !event.currentTarget.contains(next))
+            this.focusInside = false;
+    }
+    // --- Internos ---
+    patch(n, change) {
+        const item = { ...n, ...change };
+        this.notifications.update((list) => list.map((x) => (x.id === n.id ? item : x)));
+        return item;
+    }
+    /** Antes de quitar un aviso de la vista: foco al siguiente (o al anterior, o al título). */
+    focusAfterRemoval(n) {
+        const root = this.panelRoot();
+        const items = Array.from(root?.querySelectorAll('.cb-nc__item') ?? []);
+        const i = items.findIndex((el) => el.dataset['id'] === n.id);
+        const nextId = (items[i + 1] ?? items[i - 1])?.dataset['id'];
+        afterNextRender(() => {
+            const root = this.panelRoot();
+            const next = Array.from(root?.querySelectorAll('.cb-nc__item') ?? []).find((el) => el.dataset['id'] === nextId);
+            (next?.querySelector('.cb-nc__main') ?? root?.querySelector(`#${this.panelId}-title`))?.focus();
+        }, { injector: this.injector });
+    }
+    panelRoot() {
+        return this.inline() ? this.host.nativeElement : (this.overlayRef?.overlayElement ?? null);
+    }
+    attach() {
+        const origin = this.bell()?.nativeElement;
+        if (this.overlayRef || !origin)
+            return;
+        this.overlayRef = this.overlay.create({
+            positionStrategy: this.overlay.position().flexibleConnectedTo(origin).withPositions(this.positions).withPush(true).withViewportMargin(8),
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+            panelClass: 'cb-nc-overlay',
+            maxWidth: 'calc(100vw - 16px)',
+        });
+        this.overlayRef.attach(new TemplatePortal(this.panelTpl(), this.vcr));
+        this.overlayRef.backdropClick().subscribe(() => this.hide());
+    }
+    detach() {
+        this.overlayRef?.dispose();
+        this.overlayRef = null;
+        this.focusInside = false;
+    }
+    /** Un espacio duro alterno hace que el mismo texto cuente como cambio y se vuelva a anunciar. */
+    announce(text) {
+        this.announceFlip = !this.announceFlip;
+        this.announcement.set(this.announceFlip ? text : `${text} `);
+    }
+    focusLater(selector) {
+        afterNextRender(() => this.panelRoot()?.querySelector(selector)?.focus(), { injector: this.injector });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbNotificationCenter, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbNotificationCenter, isStandalone: true, selector: "cb-notification-center", inputs: { notifications: { classPropertyName: "notifications", publicName: "notifications", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, groupByDate: { classPropertyName: "groupByDate", publicName: "groupByDate", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, announceNew: { classPropertyName: "announceNew", publicName: "announceNew", isSignal: true, isRequired: false, transformFunction: null }, showViewAll: { classPropertyName: "showViewAll", publicName: "showViewAll", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { notifications: "notificationsChange", filter: "filterChange", open: "openChange", itemClick: "itemClick", actionClick: "actionClick", readChange: "readChange", markAll: "markAll", itemRemove: "itemRemove", viewAll: "viewAll" }, host: { properties: { "class.cb-notification-center--inline": "inline()" }, classAttribute: "cb-notification-center" }, viewQueries: [{ propertyName: "panelTpl", first: true, predicate: ["panelTpl"], descendants: true, isSignal: true }, { propertyName: "bell", first: true, predicate: ["bell"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (inline()) {
+      <ng-container [ngTemplateOutlet]="panelTpl" />
+    } @else {
+      <button
+        #bell
+        type="button"
+        class="cb-nc__bell"
+        [attr.aria-label]="bellLabel()"
+        aria-haspopup="dialog"
+        [attr.aria-expanded]="open()"
+        [attr.aria-controls]="open() ? panelId : null"
+        (click)="toggle()"
+      >
+        <cb-icon name="bell" [size]="20" aria-hidden="true" />
+        @if (unread()) {
+          <span class="cb-nc__badge" aria-hidden="true">{{ badge() }}</span>
+        }
+      </button>
+    }
+
+    <div class="cb-nc__sr" aria-live="polite">{{ announcement() }}</div>
+
+    <ng-template #panelTpl>
+      <div
+        class="cb-nc__panel"
+        [id]="panelId"
+        [attr.role]="inline() ? 'region' : 'dialog'"
+        [attr.aria-labelledby]="panelId + '-title'"
+        [style.width]="inline() ? null : panelWidth()"
+        (keydown)="onPanelKeydown($event)"
+        (focusin)="focusInside = true"
+        (focusout)="onPanelFocusOut($event)"
+      >
+        <div class="cb-nc__header">
+          <span class="cb-nc__title" role="heading" [attr.aria-level]="headingLevel()" [id]="panelId + '-title'" tabindex="-1">
+            {{ heading() ?? t().notificationsTitle }}
+          </span>
+          <button type="button" class="cb-nc__link" [disabled]="!unread()" (click)="markAllRead()">
+            <cb-icon name="check-check" [size]="16" aria-hidden="true" />
+            {{ t().notificationsMarkAllRead }}
+          </button>
+        </div>
+
+        <div class="cb-nc__filter" role="group" [attr.aria-label]="t().notificationsShow">
+          <button type="button" class="cb-nc__filter-btn" [attr.aria-pressed]="filter() === 'all'" (click)="filter.set('all')">
+            {{ t().notificationsAll }}
+          </button>
+          <button type="button" class="cb-nc__filter-btn" [attr.aria-pressed]="filter() === 'unread'" (click)="filter.set('unread')">
+            {{ t().notificationsUnread }}
+            @if (unread()) {
+              <span class="cb-nc__count">{{ unread() }}</span>
+            }
+          </button>
+        </div>
+
+        <div class="cb-nc__body" [style.max-height]="maxHeight()">
+          @for (g of groups(); track g.key) {
+            @if (groupByDate()) {
+              <span class="cb-nc__group" role="heading" [attr.aria-level]="headingLevel() + 1" [id]="panelId + '-' + g.key">{{ groupLabel(g.key) }}</span>
+            }
+            <ul class="cb-nc__list" [attr.aria-labelledby]="groupByDate() ? panelId + '-' + g.key : panelId + '-title'">
+              @for (n of g.items; track n.id) {
+                <li class="cb-nc__item" [class.cb-nc__item--unread]="!n.read" [attr.data-id]="n.id">
+                  <span class="cb-nc__media" aria-hidden="true">
+                    @if (n.person; as p) {
+                      <cb-avatar [image]="p.image ?? ''" [label]="initials(p.name)" [size]="36" />
+                    } @else {
+                      <span class="cb-nc__icon" [attr.data-severity]="n.severity || 'info'">
+                        <cb-icon [name]="iconOf(n)" [size]="18" />
+                      </span>
+                    }
+                  </span>
+                  <div class="cb-nc__content">
+                    <button type="button" class="cb-nc__main" [attr.aria-describedby]="itemId(n) + '-time'" (click)="select(n)">
+                      @if (!n.read) {
+                        <span class="cb-nc__sr">{{ t().notificationsUnreadItem }}: </span>
+                      }
+                      <span class="cb-nc__item-title">{{ n.title }}</span>
+                      @if (n.text) {
+                        <span class="cb-nc__text">{{ n.text }}</span>
+                      }
+                    </button>
+                    <time class="cb-nc__time" [id]="itemId(n) + '-time'" [attr.datetime]="iso(n.date)" [attr.title]="full(n.date)">{{ rel(n.date) }}</time>
+                    @if (n.actions?.length) {
+                      <div class="cb-nc__actions">
+                        @for (a of n.actions; track a.id) {
+                          <button type="button" class="cb-nc__action" [class.cb-nc__action--primary]="a.severity === 'primary'" (click)="runAction(n, a)">
+                            {{ a.label }}
+                          </button>
+                        }
+                      </div>
+                    }
+                  </div>
+                  @if (!n.read) {
+                    <span class="cb-nc__dot" aria-hidden="true"></span>
+                  }
+                  <div class="cb-nc__tools">
+                    <button
+                      type="button"
+                      class="cb-nc__tool"
+                      [attr.aria-label]="fmt(n.read ? t().notificationsMarkUnread : t().notificationsMarkRead, n.title)"
+                      [attr.title]="n.read ? t().notificationsMarkUnreadShort : t().notificationsMarkReadShort"
+                      (click)="setRead(n, !n.read)"
+                    >
+                      <cb-icon [name]="n.read ? 'mail' : 'check'" [size]="15" aria-hidden="true" />
+                    </button>
+                    @if (removable()) {
+                      <button type="button" class="cb-nc__tool" [attr.aria-label]="fmt(t().removeItem, n.title)" [attr.title]="t().remove" (click)="remove(n)">
+                        <cb-icon name="x" [size]="15" aria-hidden="true" />
+                      </button>
+                    }
+                  </div>
+                </li>
+              }
+            </ul>
+          } @empty {
+            <div class="cb-nc__empty">
+              <cb-icon name="bell-off" [size]="28" aria-hidden="true" />
+              <p>{{ filter() === 'unread' && notifications().length ? t().notificationsAllRead : (emptyMessage() ?? t().notificationsEmpty) }}</p>
+            </div>
+          }
+        </div>
+
+        @if (showViewAll()) {
+          <div class="cb-nc__footer">
+            <button type="button" class="cb-nc__link" (click)="onViewAll()">{{ t().notificationsViewAll }}</button>
+          </div>
+        }
+      </div>
+    </ng-template>
+  `, isInline: true, styles: [".cb-notification-center{display:inline-block;position:relative;color:var(--cb-color-text);font-family:var(--cb-font-sans)}.cb-notification-center--inline{display:block}.cb-nc__bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:0;border-radius:var(--cb-radius-full, 999px);background:transparent;color:var(--cb-color-text);cursor:pointer}.cb-nc__bell:hover,.cb-nc__bell[aria-expanded=true]{background:var(--cb-color-surface-hover)}.cb-nc__badge{position:absolute;top:.125rem;right:.125rem;min-width:1.125rem;height:1.125rem;padding:0 .25rem;box-sizing:border-box;border:2px solid var(--cb-color-bg, #fff);border-radius:var(--cb-radius-full, 999px);background:var(--cb-color-danger);color:var(--cb-color-danger-contrast, #fff);font-size:.625rem;font-weight:var(--cb-font-weight-semibold, 600);line-height:.875rem;text-align:center}.cb-nc__panel{display:flex;flex-direction:column;box-sizing:border-box;max-width:100%;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, 8px);background:var(--cb-color-surface-raised, var(--cb-color-surface));color:var(--cb-color-text);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm, .875rem)}.cb-nc-overlay .cb-nc__panel{box-shadow:var(--cb-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .15))}.cb-nc__header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;padding:.875rem 1rem .5rem}.cb-nc__title{font-size:var(--cb-text-base, 1rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-nc__title:focus{outline:none}.cb-nc__title:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-nc__link{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .375rem;border:0;border-radius:var(--cb-radius-sm, 4px);background:transparent;color:var(--cb-color-primary);font:inherit;font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-medium, 500);cursor:pointer}.cb-nc__link:hover:not(:disabled){background:var(--cb-color-surface-hover)}.cb-nc__link:disabled{color:var(--cb-color-text-muted);cursor:default}.cb-nc__filter{display:flex;gap:.25rem;padding:0 1rem .5rem;border-bottom:1px solid var(--cb-color-border)}.cb-nc__filter-btn{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .625rem;border:0;border-radius:var(--cb-radius-full, 999px);background:transparent;color:var(--cb-color-text-muted);font:inherit;font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-medium, 500);cursor:pointer}.cb-nc__filter-btn:hover{color:var(--cb-color-text)}.cb-nc__filter-btn[aria-pressed=true]{background:var(--cb-color-surface-hover);color:var(--cb-color-text)}.cb-nc__count{min-width:1.125rem;padding:0 .3125rem;box-sizing:border-box;border-radius:var(--cb-radius-full, 999px);background:var(--cb-color-primary);color:var(--cb-color-primary-contrast, #fff);font-size:.625rem;line-height:1.125rem;text-align:center}.cb-nc__body{overflow-y:auto;overscroll-behavior:contain}.cb-nc__group{display:block;padding:.75rem 1rem .25rem;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-semibold, 600);letter-spacing:.02em;text-transform:uppercase}.cb-nc__list{margin:0;padding:0;list-style:none}.cb-nc__item{display:flex;gap:.75rem;padding:.75rem 1rem}.cb-nc__item+.cb-nc__item{border-top:1px solid var(--cb-color-border)}.cb-nc__item--unread{background:color-mix(in srgb,var(--cb-color-primary) 6%,transparent)}.cb-nc__item:hover{background:color-mix(in srgb,var(--cb-color-text) 5%,transparent)}.cb-nc__media{flex:none}.cb-nc__icon{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:var(--cb-radius-full, 999px);--_c: var(--cb-color-info);background:color-mix(in srgb,var(--_c) 14%,transparent);color:var(--_c)}.cb-nc__icon[data-severity=success]{--_c: var(--cb-color-success)}.cb-nc__icon[data-severity=warning]{--_c: var(--cb-color-warning)}.cb-nc__icon[data-severity=danger]{--_c: var(--cb-color-danger)}.cb-nc__content{display:flex;flex:1;flex-direction:column;gap:.125rem;min-width:0}.cb-nc__main{display:flex;flex-direction:column;gap:.125rem;padding:0;border:0;border-radius:var(--cb-radius-sm, 4px);background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}.cb-nc__item{position:relative}.cb-nc__main:after{content:\"\";position:absolute;inset:0}.cb-nc__tools,.cb-nc__actions,.cb-nc__time{position:relative;z-index:1}.cb-nc__item-title{font-weight:var(--cb-font-weight-medium, 500);overflow-wrap:anywhere}.cb-nc__item--unread .cb-nc__item-title{font-weight:var(--cb-font-weight-semibold, 600)}.cb-nc__text{display:-webkit-box;overflow:hidden;color:var(--cb-color-text-muted);-webkit-box-orient:vertical;-webkit-line-clamp:2}.cb-nc__time{align-self:flex-start;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem)}.cb-nc__actions{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.375rem}.cb-nc__action{min-height:1.75rem;padding:0 .75rem;border:1px solid var(--cb-color-border-strong, var(--cb-color-border));border-radius:var(--cb-radius-md, 6px);background:var(--cb-color-surface-raised, transparent);color:var(--cb-color-text);font:inherit;font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-medium, 500);cursor:pointer}.cb-nc__action:hover{background:var(--cb-color-surface-hover)}.cb-nc__action--primary{border-color:var(--cb-color-primary);background:var(--cb-color-primary);color:var(--cb-color-primary-contrast, #fff)}.cb-nc__action--primary:hover{background:var(--cb-color-primary-700, var(--cb-color-primary))}.cb-nc__tools{position:absolute;top:.5rem;right:.75rem;display:flex;gap:.125rem;padding:.125rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-full, 999px);background:var(--cb-color-surface-raised, var(--cb-color-surface));box-shadow:var(--cb-shadow-sm, 0 1px 2px rgba(0, 0, 0, .08));opacity:0}.cb-nc__dot{flex:none;width:.5rem;height:.5rem;margin:.375rem 0 0;border-radius:var(--cb-radius-full, 999px);background:var(--cb-color-primary)}.cb-nc__tool{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border:0;border-radius:var(--cb-radius-full, 999px);background:transparent;color:var(--cb-color-text-muted);cursor:pointer}.cb-nc__item:hover .cb-nc__tools,.cb-nc__item:focus-within .cb-nc__tools{opacity:1}@media(hover:none){.cb-nc__tools{position:static;align-self:flex-start;border:0;box-shadow:none;background:transparent;opacity:1}}.cb-nc__tool:hover{background:var(--cb-color-surface-active, var(--cb-color-border));color:var(--cb-color-text)}.cb-nc__empty{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:2rem 1rem;color:var(--cb-color-text-muted);text-align:center}.cb-nc__empty p{margin:0}.cb-nc__footer{display:flex;justify-content:center;padding:.5rem;border-top:1px solid var(--cb-color-border)}.cb-nc__bell:focus-visible,.cb-nc__link:focus-visible,.cb-nc__filter-btn:focus-visible,.cb-nc__action:focus-visible,.cb-nc__tool:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-nc__main:focus-visible{outline:none}.cb-nc__item:has(.cb-nc__main:focus-visible){outline:2px solid var(--cb-color-focus-ring);outline-offset:-2px}.cb-nc__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CbAvatar, selector: "cb-avatar", inputs: ["image", "label", "icon", "size", "shape", "severity", "ariaLabel"] }, { kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbNotificationCenter, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-notification-center', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet, CbAvatar, CbIcon], host: { class: 'cb-notification-center', '[class.cb-notification-center--inline]': 'inline()' }, template: `
+    @if (inline()) {
+      <ng-container [ngTemplateOutlet]="panelTpl" />
+    } @else {
+      <button
+        #bell
+        type="button"
+        class="cb-nc__bell"
+        [attr.aria-label]="bellLabel()"
+        aria-haspopup="dialog"
+        [attr.aria-expanded]="open()"
+        [attr.aria-controls]="open() ? panelId : null"
+        (click)="toggle()"
+      >
+        <cb-icon name="bell" [size]="20" aria-hidden="true" />
+        @if (unread()) {
+          <span class="cb-nc__badge" aria-hidden="true">{{ badge() }}</span>
+        }
+      </button>
+    }
+
+    <div class="cb-nc__sr" aria-live="polite">{{ announcement() }}</div>
+
+    <ng-template #panelTpl>
+      <div
+        class="cb-nc__panel"
+        [id]="panelId"
+        [attr.role]="inline() ? 'region' : 'dialog'"
+        [attr.aria-labelledby]="panelId + '-title'"
+        [style.width]="inline() ? null : panelWidth()"
+        (keydown)="onPanelKeydown($event)"
+        (focusin)="focusInside = true"
+        (focusout)="onPanelFocusOut($event)"
+      >
+        <div class="cb-nc__header">
+          <span class="cb-nc__title" role="heading" [attr.aria-level]="headingLevel()" [id]="panelId + '-title'" tabindex="-1">
+            {{ heading() ?? t().notificationsTitle }}
+          </span>
+          <button type="button" class="cb-nc__link" [disabled]="!unread()" (click)="markAllRead()">
+            <cb-icon name="check-check" [size]="16" aria-hidden="true" />
+            {{ t().notificationsMarkAllRead }}
+          </button>
+        </div>
+
+        <div class="cb-nc__filter" role="group" [attr.aria-label]="t().notificationsShow">
+          <button type="button" class="cb-nc__filter-btn" [attr.aria-pressed]="filter() === 'all'" (click)="filter.set('all')">
+            {{ t().notificationsAll }}
+          </button>
+          <button type="button" class="cb-nc__filter-btn" [attr.aria-pressed]="filter() === 'unread'" (click)="filter.set('unread')">
+            {{ t().notificationsUnread }}
+            @if (unread()) {
+              <span class="cb-nc__count">{{ unread() }}</span>
+            }
+          </button>
+        </div>
+
+        <div class="cb-nc__body" [style.max-height]="maxHeight()">
+          @for (g of groups(); track g.key) {
+            @if (groupByDate()) {
+              <span class="cb-nc__group" role="heading" [attr.aria-level]="headingLevel() + 1" [id]="panelId + '-' + g.key">{{ groupLabel(g.key) }}</span>
+            }
+            <ul class="cb-nc__list" [attr.aria-labelledby]="groupByDate() ? panelId + '-' + g.key : panelId + '-title'">
+              @for (n of g.items; track n.id) {
+                <li class="cb-nc__item" [class.cb-nc__item--unread]="!n.read" [attr.data-id]="n.id">
+                  <span class="cb-nc__media" aria-hidden="true">
+                    @if (n.person; as p) {
+                      <cb-avatar [image]="p.image ?? ''" [label]="initials(p.name)" [size]="36" />
+                    } @else {
+                      <span class="cb-nc__icon" [attr.data-severity]="n.severity || 'info'">
+                        <cb-icon [name]="iconOf(n)" [size]="18" />
+                      </span>
+                    }
+                  </span>
+                  <div class="cb-nc__content">
+                    <button type="button" class="cb-nc__main" [attr.aria-describedby]="itemId(n) + '-time'" (click)="select(n)">
+                      @if (!n.read) {
+                        <span class="cb-nc__sr">{{ t().notificationsUnreadItem }}: </span>
+                      }
+                      <span class="cb-nc__item-title">{{ n.title }}</span>
+                      @if (n.text) {
+                        <span class="cb-nc__text">{{ n.text }}</span>
+                      }
+                    </button>
+                    <time class="cb-nc__time" [id]="itemId(n) + '-time'" [attr.datetime]="iso(n.date)" [attr.title]="full(n.date)">{{ rel(n.date) }}</time>
+                    @if (n.actions?.length) {
+                      <div class="cb-nc__actions">
+                        @for (a of n.actions; track a.id) {
+                          <button type="button" class="cb-nc__action" [class.cb-nc__action--primary]="a.severity === 'primary'" (click)="runAction(n, a)">
+                            {{ a.label }}
+                          </button>
+                        }
+                      </div>
+                    }
+                  </div>
+                  @if (!n.read) {
+                    <span class="cb-nc__dot" aria-hidden="true"></span>
+                  }
+                  <div class="cb-nc__tools">
+                    <button
+                      type="button"
+                      class="cb-nc__tool"
+                      [attr.aria-label]="fmt(n.read ? t().notificationsMarkUnread : t().notificationsMarkRead, n.title)"
+                      [attr.title]="n.read ? t().notificationsMarkUnreadShort : t().notificationsMarkReadShort"
+                      (click)="setRead(n, !n.read)"
+                    >
+                      <cb-icon [name]="n.read ? 'mail' : 'check'" [size]="15" aria-hidden="true" />
+                    </button>
+                    @if (removable()) {
+                      <button type="button" class="cb-nc__tool" [attr.aria-label]="fmt(t().removeItem, n.title)" [attr.title]="t().remove" (click)="remove(n)">
+                        <cb-icon name="x" [size]="15" aria-hidden="true" />
+                      </button>
+                    }
+                  </div>
+                </li>
+              }
+            </ul>
+          } @empty {
+            <div class="cb-nc__empty">
+              <cb-icon name="bell-off" [size]="28" aria-hidden="true" />
+              <p>{{ filter() === 'unread' && notifications().length ? t().notificationsAllRead : (emptyMessage() ?? t().notificationsEmpty) }}</p>
+            </div>
+          }
+        </div>
+
+        @if (showViewAll()) {
+          <div class="cb-nc__footer">
+            <button type="button" class="cb-nc__link" (click)="onViewAll()">{{ t().notificationsViewAll }}</button>
+          </div>
+        }
+      </div>
+    </ng-template>
+  `, styles: [".cb-notification-center{display:inline-block;position:relative;color:var(--cb-color-text);font-family:var(--cb-font-sans)}.cb-notification-center--inline{display:block}.cb-nc__bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border:0;border-radius:var(--cb-radius-full, 999px);background:transparent;color:var(--cb-color-text);cursor:pointer}.cb-nc__bell:hover,.cb-nc__bell[aria-expanded=true]{background:var(--cb-color-surface-hover)}.cb-nc__badge{position:absolute;top:.125rem;right:.125rem;min-width:1.125rem;height:1.125rem;padding:0 .25rem;box-sizing:border-box;border:2px solid var(--cb-color-bg, #fff);border-radius:var(--cb-radius-full, 999px);background:var(--cb-color-danger);color:var(--cb-color-danger-contrast, #fff);font-size:.625rem;font-weight:var(--cb-font-weight-semibold, 600);line-height:.875rem;text-align:center}.cb-nc__panel{display:flex;flex-direction:column;box-sizing:border-box;max-width:100%;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-lg, 8px);background:var(--cb-color-surface-raised, var(--cb-color-surface));color:var(--cb-color-text);font-family:var(--cb-font-sans);font-size:var(--cb-text-sm, .875rem)}.cb-nc-overlay .cb-nc__panel{box-shadow:var(--cb-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, .15))}.cb-nc__header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;padding:.875rem 1rem .5rem}.cb-nc__title{font-size:var(--cb-text-base, 1rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-nc__title:focus{outline:none}.cb-nc__title:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-nc__link{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .375rem;border:0;border-radius:var(--cb-radius-sm, 4px);background:transparent;color:var(--cb-color-primary);font:inherit;font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-medium, 500);cursor:pointer}.cb-nc__link:hover:not(:disabled){background:var(--cb-color-surface-hover)}.cb-nc__link:disabled{color:var(--cb-color-text-muted);cursor:default}.cb-nc__filter{display:flex;gap:.25rem;padding:0 1rem .5rem;border-bottom:1px solid var(--cb-color-border)}.cb-nc__filter-btn{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .625rem;border:0;border-radius:var(--cb-radius-full, 999px);background:transparent;color:var(--cb-color-text-muted);font:inherit;font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-medium, 500);cursor:pointer}.cb-nc__filter-btn:hover{color:var(--cb-color-text)}.cb-nc__filter-btn[aria-pressed=true]{background:var(--cb-color-surface-hover);color:var(--cb-color-text)}.cb-nc__count{min-width:1.125rem;padding:0 .3125rem;box-sizing:border-box;border-radius:var(--cb-radius-full, 999px);background:var(--cb-color-primary);color:var(--cb-color-primary-contrast, #fff);font-size:.625rem;line-height:1.125rem;text-align:center}.cb-nc__body{overflow-y:auto;overscroll-behavior:contain}.cb-nc__group{display:block;padding:.75rem 1rem .25rem;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-semibold, 600);letter-spacing:.02em;text-transform:uppercase}.cb-nc__list{margin:0;padding:0;list-style:none}.cb-nc__item{display:flex;gap:.75rem;padding:.75rem 1rem}.cb-nc__item+.cb-nc__item{border-top:1px solid var(--cb-color-border)}.cb-nc__item--unread{background:color-mix(in srgb,var(--cb-color-primary) 6%,transparent)}.cb-nc__item:hover{background:color-mix(in srgb,var(--cb-color-text) 5%,transparent)}.cb-nc__media{flex:none}.cb-nc__icon{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:var(--cb-radius-full, 999px);--_c: var(--cb-color-info);background:color-mix(in srgb,var(--_c) 14%,transparent);color:var(--_c)}.cb-nc__icon[data-severity=success]{--_c: var(--cb-color-success)}.cb-nc__icon[data-severity=warning]{--_c: var(--cb-color-warning)}.cb-nc__icon[data-severity=danger]{--_c: var(--cb-color-danger)}.cb-nc__content{display:flex;flex:1;flex-direction:column;gap:.125rem;min-width:0}.cb-nc__main{display:flex;flex-direction:column;gap:.125rem;padding:0;border:0;border-radius:var(--cb-radius-sm, 4px);background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}.cb-nc__item{position:relative}.cb-nc__main:after{content:\"\";position:absolute;inset:0}.cb-nc__tools,.cb-nc__actions,.cb-nc__time{position:relative;z-index:1}.cb-nc__item-title{font-weight:var(--cb-font-weight-medium, 500);overflow-wrap:anywhere}.cb-nc__item--unread .cb-nc__item-title{font-weight:var(--cb-font-weight-semibold, 600)}.cb-nc__text{display:-webkit-box;overflow:hidden;color:var(--cb-color-text-muted);-webkit-box-orient:vertical;-webkit-line-clamp:2}.cb-nc__time{align-self:flex-start;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem)}.cb-nc__actions{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.375rem}.cb-nc__action{min-height:1.75rem;padding:0 .75rem;border:1px solid var(--cb-color-border-strong, var(--cb-color-border));border-radius:var(--cb-radius-md, 6px);background:var(--cb-color-surface-raised, transparent);color:var(--cb-color-text);font:inherit;font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-medium, 500);cursor:pointer}.cb-nc__action:hover{background:var(--cb-color-surface-hover)}.cb-nc__action--primary{border-color:var(--cb-color-primary);background:var(--cb-color-primary);color:var(--cb-color-primary-contrast, #fff)}.cb-nc__action--primary:hover{background:var(--cb-color-primary-700, var(--cb-color-primary))}.cb-nc__tools{position:absolute;top:.5rem;right:.75rem;display:flex;gap:.125rem;padding:.125rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-full, 999px);background:var(--cb-color-surface-raised, var(--cb-color-surface));box-shadow:var(--cb-shadow-sm, 0 1px 2px rgba(0, 0, 0, .08));opacity:0}.cb-nc__dot{flex:none;width:.5rem;height:.5rem;margin:.375rem 0 0;border-radius:var(--cb-radius-full, 999px);background:var(--cb-color-primary)}.cb-nc__tool{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border:0;border-radius:var(--cb-radius-full, 999px);background:transparent;color:var(--cb-color-text-muted);cursor:pointer}.cb-nc__item:hover .cb-nc__tools,.cb-nc__item:focus-within .cb-nc__tools{opacity:1}@media(hover:none){.cb-nc__tools{position:static;align-self:flex-start;border:0;box-shadow:none;background:transparent;opacity:1}}.cb-nc__tool:hover{background:var(--cb-color-surface-active, var(--cb-color-border));color:var(--cb-color-text)}.cb-nc__empty{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:2rem 1rem;color:var(--cb-color-text-muted);text-align:center}.cb-nc__empty p{margin:0}.cb-nc__footer{display:flex;justify-content:center;padding:.5rem;border-top:1px solid var(--cb-color-border)}.cb-nc__bell:focus-visible,.cb-nc__link:focus-visible,.cb-nc__filter-btn:focus-visible,.cb-nc__action:focus-visible,.cb-nc__tool:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:1px}.cb-nc__main:focus-visible{outline:none}.cb-nc__item:has(.cb-nc__main:focus-visible){outline:2px solid var(--cb-color-focus-ring);outline-offset:-2px}.cb-nc__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { notifications: [{ type: i0.Input, args: [{ isSignal: true, alias: "notifications", required: false }] }, { type: i0.Output, args: ["notificationsChange"] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }, { type: i0.Output, args: ["filterChange"] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], groupByDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupByDate", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], announceNew: [{ type: i0.Input, args: [{ isSignal: true, alias: "announceNew", required: false }] }], showViewAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showViewAll", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], readChange: [{ type: i0.Output, args: ["readChange"] }], markAll: [{ type: i0.Output, args: ["markAll"] }], itemRemove: [{ type: i0.Output, args: ["itemRemove"] }], viewAll: [{ type: i0.Output, args: ["viewAll"] }], panelTpl: [{ type: i0.ViewChild, args: ['panelTpl', { isSignal: true }] }], bell: [{ type: i0.ViewChild, args: ['bell', { isSignal: true }] }] } });
+
+/*
+ * Public API Surface de @caribeng/ui/notification-center
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CbNotificationCenter };