@koobiq/components 20.4.2 → 21.0.0

package/fesm2022/koobiq-components-notification-center.mjs

@@ -1,192 +1,255 @@
+import { _IdGenerator, FocusMonitor, InputModalityDetector, CdkTrapFocus, ConfigurableFocusTrapFactory, FocusTrapFactory, FOCUS_TRAP_INERT_STRATEGY } from '@angular/cdk/a11y';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { Overlay } from '@angular/cdk/overlay';
-import { NgTemplateOutlet, AsyncPipe } from '@angular/common';
+import { ScrollDispatcher, CdkScrollable } from '@angular/cdk/scrolling';
+import { NgTemplateOutlet, DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, EventEmitter, Injectable, TemplateRef, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, InjectionToken, ChangeDetectorRef, viewChild, booleanAttribute, numberAttribute, Output, Directive, NgModule } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { inject, signal, computed, untracked, Injectable, InjectionToken, input, TemplateRef, ViewEncapsulation, ChangeDetectionStrategy, Component, RendererStyleFlags2, Injector, NgZone, viewChild, afterNextRender, forwardRef, numberAttribute, EventEmitter, booleanAttribute, Directive, NgModule } from '@angular/core';
+import { takeUntilDestroyed, outputFromObservable } from '@angular/core/rxjs-interop';
 import { KbqBadgeModule } from '@koobiq/components/badge';
 import * as i3$1 from '@koobiq/components/button';
 import { KbqButtonModule } from '@koobiq/components/button';
-import * as i1$1 from '@koobiq/components/core';
-import { KbqAnimationDurations, DateAdapter, DateFormatter, KbqReadStateDirective, PopUpPlacements, ThemePalette, ruRULocaleData, KbqPopUp, KBQ_LOCALE_SERVICE, applyPopupMargins, KbqOverflowShadowContainer, KbqOverflowShadowTop, KbqOverflowShadowBottom, KbqPopUpTrigger, PopUpTriggers, PopUpSizes, POSITION_TO_CSS_MAP, kbqSiblingPopupProvider, EmptyFocusTrapStrategy } from '@koobiq/components/core';
+import * as i1 from '@koobiq/components/core';
+import { DateAdapter, DateFormatter, KBQ_LOCALE_SERVICE, ruRULocaleData, kbqLocaleConfigurationOverrideProvider, KbqReadStateDirective, PopUpPlacements, KbqPopUp, KbqLocaleOverridesDirective, KBQ_A11Y_LOCALE_CONFIGURATION, applyPopupMargins, KbqOverflowShadowContainer, KbqOverflowShadowTop, KbqOverflowShadowBottom, EmptyFocusTrapStrategy, KbqPopUpTrigger, PopUpTriggers, POSITION_TO_CSS_MAP, PopUpSizes, kbqSiblingPopupProvider } from '@koobiq/components/core';
 import * as i4 from '@koobiq/components/divider';
 import { KbqDividerModule } from '@koobiq/components/divider';
 import * as i5 from '@koobiq/components/dropdown';
 import { KbqDropdownModule } from '@koobiq/components/dropdown';
-import * as i1 from '@koobiq/components/icon';
+import * as i2 from '@koobiq/components/icon';
 import { KbqIconModule } from '@koobiq/components/icon';
 import * as i7 from '@koobiq/components/loader-overlay';
 import { KbqLoaderOverlayModule } from '@koobiq/components/loader-overlay';
 import * as i8 from '@koobiq/components/progress-spinner';
 import { KbqProgressSpinnerModule } from '@koobiq/components/progress-spinner';
-import * as i2 from '@koobiq/components/scrollbar';
-import { KbqScrollbar, KbqScrollbarModule } from '@koobiq/components/scrollbar';
+import { KbqScrollbarViewport } from '@koobiq/components/scrollbar';
 import * as i6 from '@koobiq/components/tooltip';
-import { KbqTooltipTrigger, KbqToolTipModule } from '@koobiq/components/tooltip';
-import { combineLatestWith, BehaviorSubject, merge, Subject } from 'rxjs';
-import { map, filter, auditTime, distinctUntilChanged, pairwise } from 'rxjs/operators';
-import { trigger, state, style, transition, animate } from '@angular/animations';
-import { KbqToastService } from '@koobiq/components/toast';
+import { KbqToolTipModule } from '@koobiq/components/tooltip';
+import { Subject, BehaviorSubject, merge } from 'rxjs';
+import { skip, map, filter, auditTime, distinctUntilChanged } from 'rxjs/operators';
+import { KbqToastService, KbqToastStyle } from '@koobiq/components/toast';
 import * as i3 from '@koobiq/components/title';
 import { KbqTitleModule } from '@koobiq/components/title';
-import { ConfigurableFocusTrapFactory, FocusTrapFactory, FOCUS_TRAP_INERT_STRATEGY } from '@angular/cdk/a11y';
-
-/** @docs-private */
-const KbqNotificationCenterAnimations = {
-    /** Animation that transitions a tooltip in and out. */
-    state: trigger('state', [
-        state('initial', style({
-            opacity: 0,
-            transform: 'scale(1, 0.8)'
-        })),
-        transition('* => visible', animate('120ms cubic-bezier(0, 0, 0.2, 1)', style({
-            opacity: 1,
-            transform: 'scale(1, 1)'
-        }))),
-        transition('* => hidden', animate(`${KbqAnimationDurations.Rapid} linear`, style({ opacity: 0 })))
-    ])
-};
 
+/** Number of unread notifications above which the trigger counter switches to `"99+"`. */
 const maxUnreadItemsLength = 99;
+/** Suffix appended to a generated id so items ingested within the same millisecond stay distinct. */
+let uniqueIdCounter = 0;
+/** State and commands of the notification center: the list itself, its modes, and the removal events. */
 class KbqNotificationCenterService {
-    /** Notification items */
+    /**
+     * The notifications, as a snapshot: reading them does not make an `effect()` or a `computed()` depend on the
+     * list, so an effect can read and reassign it. Follow `changes` to react to updates.
+     */
     get items() {
-        return this.originalItems.value;
+        return this.currentItems();
     }
     set items(values) {
-        this.originalItems.next(this.setReadState(this.setIds(values)));
-    }
-    /** Number of unread notifications */
-    get unreadItemsCounter() {
-        return this.originalItems.pipe(map((items) => items.filter((item) => item.read === false).length)).pipe(combineLatestWith(this.onRead), map(([value]) => {
-            if (value < maxUnreadItemsLength) {
-                return value ? value.toString() : '';
-            }
-            else {
-                return `${maxUnreadItemsLength}+`;
-            }
-        }));
+        this.setItems(this.setReadState(this.setIds(values)));
     }
-    /** true if there are no notifications. */
+    /** Whether there are no notifications. A snapshot, like `items`. */
     get isEmpty() {
-        return this.originalItems.value.length === 0;
+        return this.currentItems().length === 0;
     }
     constructor() {
-        /** @docs-private */
         this.adapter = inject(DateAdapter);
-        /** @docs-private */
         this.formatter = inject(DateFormatter);
-        /** @docs-private */
         this.toastService = inject(KbqToastService);
+        this.localeService = inject(KBQ_LOCALE_SERVICE, { optional: true });
+        /** Parsed `date` per item. Keyed by the item itself, so no consumer-owned object is written to. */
+        this.parsedDates = new WeakMap();
+        this._silentMode = signal(false, ...(ngDevMode ? [{ debugName: "_silentMode" }] : /* istanbul ignore next */ []));
+        this._loadingMode = signal(false, ...(ngDevMode ? [{ debugName: "_loadingMode" }] : /* istanbul ignore next */ []));
+        this._errorMode = signal(false, ...(ngDevMode ? [{ debugName: "_errorMode" }] : /* istanbul ignore next */ []));
+        this._loadingMore = signal(false, ...(ngDevMode ? [{ debugName: "_loadingMore" }] : /* istanbul ignore next */ []));
+        this._loadMoreErrorMode = signal(false, ...(ngDevMode ? [{ debugName: "_loadMoreErrorMode" }] : /* istanbul ignore next */ []));
+        this._hasMore = signal(true, ...(ngDevMode ? [{ debugName: "_hasMore" }] : /* istanbul ignore next */ []));
+        this.originalItems = signal([], ...(ngDevMode ? [{ debugName: "originalItems" }] : /* istanbul ignore next */ []));
+        /**
+         * Bumped on every `onRead` emission: `read` is flipped in place on the consumer's object, so the list
+         * itself does not change when a notification is read.
+         */
+        this.readVersion = signal(0, ...(ngDevMode ? [{ debugName: "readVersion" }] : /* istanbul ignore next */ []));
+        /**
+         * Read state of each notification a view follows, as last reported by `onRead` or a list update. One per
+         * item, so that reading a notification refreshes its own row only.
+         */
+        this.readStates = new WeakMap();
+        /** Pinged by every state setter; `changes` merges it with `onRead`. */
+        this.stateChanges = new Subject();
         /** @docs-private */
-        this.silentMode = new BehaviorSubject(false);
+        this.silentMode = this._silentMode.asReadonly();
         /** @docs-private */
-        this.loadingMode = new BehaviorSubject(false);
+        this.loadingMode = this._loadingMode.asReadonly();
         /** @docs-private */
-        this.errorMode = new BehaviorSubject(false);
+        this.errorMode = this._errorMode.asReadonly();
         /**
          * Whether the bottom "load more" spinner is shown while the next page is being loaded.
          * Note: this is the infinite-scroll indicator and is distinct from `loadingMode`,
-         * which renders the full-screen loader instead of the list.
+         * which renders the full-screen loader instead of the list. Set it with `setLoadingMore()`.
          */
-        this.loadingMore = new BehaviorSubject(false);
+        this.loadingMore = this._loadingMore.asReadonly();
         /**
          * Whether the bottom "load more" error row (with a retry button) is shown.
          * Distinct from `errorMode`, which replaces the whole list with the full-screen error state.
+         * Set it with `setLoadMoreErrorMode()`.
          */
-        this.loadMoreErrorMode = new BehaviorSubject(false);
+        this.loadMoreErrorMode = this._loadMoreErrorMode.asReadonly();
         /**
          * Whether there are more notifications to load. While `true`, scrolling to the bottom
-         * emits `onNextPage`; set it to `false` to stop further infinite-scroll requests.
+         * emits `onNextPage`; set it to `false` with `setHasMore()` to stop further infinite-scroll requests.
          */
-        this.hasMore = new BehaviorSubject(true);
-        /** @docs-private */
+        this.hasMore = this._hasMore.asReadonly();
+        /** Emits a notification the moment it flips from unread to read. */
         this.onRead = new BehaviorSubject(null);
         /** Triggers an event when the user presses the reload button. */
-        this.onReload = new EventEmitter();
+        this.onReload = new Subject();
         /** Triggers an event when the list is scrolled to the bottom and the next page should be loaded. */
-        this.onNextPage = new EventEmitter();
+        this.onNextPage = new Subject();
         /** Triggers an event when an item, a group, or all notifications are removed. */
-        this.onDelete = new EventEmitter();
-        this.originalItems = new BehaviorSubject([]);
+        this.onDelete = new Subject();
         /**
          * Grouped notifications, always ordered from newest to oldest: day groups are sorted by date
-         * descending, and notifications within each day are sorted by date descending.
+         * descending, and notifications within each day are sorted by date descending. Notifications whose
+         * `date` the adapter cannot parse keep their raw value as a group heading and sort last.
+         *
          * @docs-private
          */
-        this.groupedItems = this.originalItems.pipe(map((items) => {
+        this.groupedItems = computed(() => {
+            // The day headings are localized, so a runtime `setLocale()` has to rebuild them.
+            this.localeService?.localeId();
             const result = {};
-            items.forEach((item) => this.makeGroup(item, result));
+            this.originalItems().forEach((item) => this.makeGroup(item, result));
             const groups = Object.values(result);
             // Newest notifications first within each day.
             groups.forEach((group) => group.items.sort(this.compareByDateDesc));
             // Newest day first.
             return groups.sort((a, b) => this.compareByDateDesc(a.items[0], b.items[0]));
-        }));
-        /** Emits an event whenever the changes. */
-        this.changes = merge(this.silentMode, this.loadingMode, this.errorMode, this.loadingMore, this.loadMoreErrorMode, this.hasMore, this.originalItems, this.onRead);
+        }, ...(ngDevMode ? [{ debugName: "groupedItems" }] : /* istanbul ignore next */ []));
+        /**
+         * Emits whenever any part of the center's state changes. Carries no payload — it is a ping — and
+         * emits nothing on subscription.
+         */
+        this.changes = merge(this.stateChanges, 
+        // The replayed current value is not a change.
+        this.onRead.pipe(skip(1))).pipe(map(() => undefined));
+        /**
+         * Number of unread notifications, formatted for the trigger badge: empty while nothing is unread,
+         * and `"99+"` above `maxUnreadItemsLength`.
+         */
+        this.unreadItemsCounter = computed(() => {
+            this.readVersion();
+            const value = this.originalItems().filter((item) => item.read === false).length;
+            if (value > maxUnreadItemsLength) {
+                return `${maxUnreadItemsLength}+`;
+            }
+            return value ? value.toString() : '';
+        }, ...(ngDevMode ? [{ debugName: "unreadItemsCounter" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether there are no notifications, for the center's own view to follow.
+         *
+         * @internal
+         */
+        this.empty = computed(() => this.originalItems().length === 0, ...(ngDevMode ? [{ debugName: "empty" }] : /* istanbul ignore next */ []));
         this.makeGroup = (item, groups) => {
-            const parsedDate = this.adapter.parse(item.date, '');
-            const groupId = this.adapter.format(parsedDate, 'yyyyMMdd');
-            const groupTitle = this.formatter.absoluteLongDate(parsedDate);
+            const { groupId, source, value } = this.getParsedDate(item);
             if (groups[groupId]) {
                 groups[groupId].items.push(item);
             }
             else {
                 groups[groupId] = {
-                    title: groupTitle,
+                    id: groupId,
+                    // Formatted on every recomputation rather than cached with the parsed value: the heading is
+                    // localized, and a cached one would leave the group in the locale it was built in while
+                    // a group created afterwards renders in the current one.
+                    title: value === null ? source : this.formatter.absoluteLongDate(value),
                     items: [item]
                 };
             }
         };
-        /** Compares two notifications by date so the newest comes first. */
+        /** Compares two notifications by date so the newest comes first; unparsable dates sort last. */
         this.compareByDateDesc = (a, b) => {
-            const parsedA = this.adapter.parse(a.date, '');
-            const parsedB = this.adapter.parse(b.date, '');
-            if (!parsedA || !parsedB) {
-                return 0;
+            const parsedA = this.getParsedDate(a).value;
+            const parsedB = this.getParsedDate(b).value;
+            if (parsedA === null || parsedB === null) {
+                return Number(parsedA === null) - Number(parsedB === null);
             }
             return this.adapter.compareDateTime(parsedB, parsedA);
         };
+        this.onRead.pipe(takeUntilDestroyed()).subscribe((item) => {
+            this.readVersion.update((version) => version + 1);
+            if (item)
+                this.syncReadState(item);
+        });
         this.toastService?.read.pipe(takeUntilDestroyed()).subscribe((toastData) => {
-            const item = this.items.find((item) => item.id === toastData?.id);
+            const item = this.currentItems().find((item) => item.id === toastData?.id);
             if (item && !item.read) {
                 item.read = true;
-                this.onRead.next(toastData);
+                this.onRead.next(item);
             }
         });
     }
+    /**
+     * Whether a notification is read, for a view to follow: `read` is flipped in place on the consumer's object,
+     * so a view handed that object is not told.
+     *
+     * @internal
+     */
+    isRead(item) {
+        let state = this.readStates.get(item);
+        if (!state) {
+            state = signal(!!item.read);
+            this.readStates.set(item, state);
+        }
+        // Followed for the dependency only: a view rendered anew shows the object as it is, even after a flip
+        // nothing reported.
+        state();
+        return !!item.read;
+    }
     /** Set silent mode */
     setSilentMode(value) {
-        this.silentMode.next(value);
+        this._silentMode.set(value);
+        this.notify();
     }
     /** Set loading mode */
     setLoadingMode(value) {
-        this.loadingMode.next(value);
+        this._loadingMode.set(value);
+        this.notify();
     }
     /** Set error mode */
     setErrorMode(value) {
-        this.errorMode.next(value);
+        this._errorMode.set(value);
+        this.notify();
     }
     /** Set the bottom "load more" spinner visibility. */
     setLoadingMore(value) {
-        this.loadingMore.next(value);
+        this._loadingMore.set(value);
+        this.notify();
     }
     /** Set the bottom "load more" error state visibility. */
     setLoadMoreErrorMode(value) {
-        this.loadMoreErrorMode.next(value);
+        this._loadMoreErrorMode.set(value);
+        this.notify();
     }
     /** Set whether there are more notifications to load via infinite scroll. */
     setHasMore(value) {
-        this.hasMore.next(value);
+        this._hasMore.set(value);
+        this.notify();
     }
-    /** Push new notification item in center */
+    /**
+     * Adds a notification to the list and, unless silent mode is on, shows it as a toast.
+     * Re-pushing the very same notification object is a no-op: a duplicate would show a second toast
+     * and produce a colliding list key. A different notification carrying an `id` the list already
+     * uses is added under a freshly generated one instead of being dropped.
+     */
     push(item) {
-        this.setReadState(this.setIds([item]));
-        if (!this.silentMode.value) {
+        if (this.currentItems().includes(item)) {
+            return;
+        }
+        this.setReadState(this.setIds([item], this.currentItems()));
+        if (!untracked(this.silentMode)) {
             item.toastId = this.toastService.show(item).id;
         }
-        return this.originalItems.next([...this.originalItems.value, item]);
+        this.setItems([...this.currentItems(), item]);
     }
     /** Hides the toast that corresponds to the given notification item. */
     hideToast(item) {
@@ -196,67 +259,188 @@ class KbqNotificationCenterService {
         this.toastService.hide(item.toastId);
         item.toastId = undefined;
     }
-    /** Remove notification item */
+    /** Removes a notification. Removing one that is not in the list is a no-op and emits nothing. */
     remove(removedItem) {
+        if (!this.currentItems().includes(removedItem)) {
+            return;
+        }
         this.hideToast(removedItem);
-        this.originalItems.next(this.originalItems.value.filter((item) => removedItem !== item));
-        this.onDelete.emit({ type: 'item', items: [removedItem] });
+        this.setItems(this.currentItems().filter((item) => removedItem !== item));
+        untracked(() => this.onDelete.next({ type: 'item', items: [removedItem] }));
     }
-    /** Remove group of notification items */
+    /**
+     * Removes a whole day group. Only the notifications that are actually in the list are removed and
+     * reported; a group holding none of them — a stale reference kept from an earlier `groupedItems`
+     * value — is a no-op and emits nothing.
+     */
     removeGroup(group) {
-        group.items.forEach((item) => this.hideToast(item));
-        this.originalItems.next(this.originalItems.value.filter((item) => !group.items.includes(item)));
-        this.onDelete.emit({ type: 'group', items: [...group.items] });
+        const removedItems = group.items.filter((item) => this.currentItems().includes(item));
+        if (removedItems.length === 0) {
+            return;
+        }
+        removedItems.forEach((item) => this.hideToast(item));
+        this.setItems(this.currentItems().filter((item) => !removedItems.includes(item)));
+        untracked(() => this.onDelete.next({ type: 'group', items: removedItems }));
     }
-    /** Remove all notification items */
+    /** Removes every notification. Removing from an already empty list is a no-op and emits nothing. */
     removeAll() {
-        const items = this.originalItems.value;
+        const items = this.currentItems();
+        if (items.length === 0) {
+            return;
+        }
         items.forEach((item) => this.hideToast(item));
-        this.originalItems.next([]);
-        this.onDelete.emit({ type: 'all', items });
+        this.setItems([]);
+        untracked(() => this.onDelete.next({ type: 'all', items }));
     }
-    setIds(items) {
-        items.forEach((item) => (item.id = item.id ?? new Date().getTime().toString()));
+    /**
+     * The list as the commands see it: untracked, so a command called from a reactive context does not
+     * make it depend on the list it is about to write.
+     */
+    currentItems() {
+        return untracked(this.originalItems);
+    }
+    setItems(items) {
+        this.originalItems.set(items);
+        // The list may be handed back with `read` flipped in place.
+        items.forEach((item) => this.syncReadState(item));
+        this.notify();
+    }
+    /** Tells the view of `item` its read state, which refreshes it only when the state has changed. */
+    syncReadState(item) {
+        this.readStates.get(item)?.set(!!item.read);
+    }
+    /**
+     * `changes` subscribers run synchronously, inside whatever called the command: untracked, so a command called
+     * from an `effect()` does not make it depend on the signals they read.
+     */
+    notify() {
+        untracked(() => this.stateChanges.next());
+    }
+    /**
+     * Parses a notification's `date` once and remembers the result.
+     *
+     * `DateAdapter.parse` returns `null` for anything it does not recognise, and both the Luxon and the
+     * Moment adapter throw when a `null` is passed on to `format`, so every derived value is resolved
+     * here behind a single validity check.
+     */
+    getParsedDate(item) {
+        const source = String(item.date ?? '');
+        const cached = this.parsedDates.get(item);
+        if (cached?.source === source) {
+            return cached;
+        }
+        const parsed = this.adapter.parse(source, '');
+        const isValid = parsed !== null && this.adapter.isValid(parsed);
+        const entry = isValid
+            ? {
+                source,
+                // Built from adapter accessors instead of a format string: format tokens are not
+                // portable, e.g. `'yyyyMMdd'` keys every day of a week identically under Moment.
+                groupId: `date:${this.adapter.getYear(parsed)}-${this.adapter.getMonth(parsed)}-${this.adapter.getDate(parsed)}`,
+                value: parsed
+            }
+            : { source, groupId: `raw:${source}`, value: null };
+        this.parsedDates.set(item, entry);
+        return entry;
+    }
+    /**
+     * Fills in the missing ids of `items` and re-keys the ones already taken, so that every ingested
+     * notification ends up with an id of its own.
+     *
+     * @param existing notifications `items` is joining, whose ids are therefore taken as well; empty
+     * when the list is being replaced wholesale.
+     */
+    setIds(items, existing = []) {
+        const takenIds = new Set(existing.map((item) => item.id));
+        items.forEach((item) => {
+            // A supplied id is taken on trust only while it is free: a backend that repeats one across
+            // pages would otherwise collide on the list's track key and on the toast-to-item lookup in
+            // the constructor. `Date.now()` alone collides for every item ingested in the same tick.
+            if (item.id === undefined || takenIds.has(item.id)) {
+                item.id = `${Date.now()}-${uniqueIdCounter++}`;
+            }
+            takenIds.add(item.id);
+        });
         return items;
     }
     setReadState(items) {
         items.forEach((item) => (item.read = item.read ?? false));
         return items;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNotificationCenterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNotificationCenterService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqNotificationCenterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqNotificationCenterService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNotificationCenterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqNotificationCenterService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
-let id = 0;
+/** Default configuration of notification-center. */
+const KBQ_NOTIFICATION_CENTER_DEFAULT_LOCALE_CONFIGURATION = ruRULocaleData.notificationCenter;
+/** Injection Token for providing configuration of notification-center. */
+const KBQ_NOTIFICATION_CENTER_LOCALE_CONFIGURATION = new InjectionToken('KbqNotificationCenterLocaleConfiguration', {
+    factory: () => KBQ_NOTIFICATION_CENTER_DEFAULT_LOCALE_CONFIGURATION
+});
+/**
+ * Utility provider for `KBQ_NOTIFICATION_CENTER_LOCALE_CONFIGURATION`. Only the strings you pass are overridden; the
+ * rest keep following the active locale.
+ */
+const kbqNotificationCenterLocaleConfigurationProvider = (configuration) => kbqLocaleConfigurationOverrideProvider('notificationCenter', configuration);
+/** @deprecated Use {@link KBQ_NOTIFICATION_CENTER_DEFAULT_LOCALE_CONFIGURATION}. Will be removed in 22.0.0. */
+const KBQ_NOTIFICATION_CENTER_DEFAULT_CONFIGURATION = KBQ_NOTIFICATION_CENTER_DEFAULT_LOCALE_CONFIGURATION;
+/** @deprecated Use {@link KBQ_NOTIFICATION_CENTER_LOCALE_CONFIGURATION}. Will be removed in 22.0.0. */
+const KBQ_NOTIFICATION_CENTER_CONFIGURATION = KBQ_NOTIFICATION_CENTER_LOCALE_CONFIGURATION;
+/**
+ * Narrow contract a `kbq-notification-item` consumes from the panel that renders it, instead of
+ * injecting the panel component itself.
+ */
+const KBQ_NOTIFICATION_CENTER_PANEL = new InjectionToken('KbqNotificationCenterPanel');
+
 /** @docs-private */
 class KbqNotificationItemComponent {
+    // `KbqToastService` used to write these defaults into the item handed to `push()`; it now leaves the
+    // caller's object untouched, so the row resolves them itself instead of rendering an unstyled,
+    // icon-less notification.
     get style() {
-        return {
-            [`kbq-notification-item_${this.data.style}`]: !!this.data.style
-        };
+        return this.data.style || KbqToastStyle.Contrast;
+    }
+    get icon() {
+        return this.data.icon ?? true;
+    }
+    get read() {
+        return this.service.isRead(this.data);
     }
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
     get data() {
         return this._data;
     }
     set data(value) {
         this._data = value;
-        this.time = this.adapter.format(this.adapter.parse(value.date, ''), 'HH:mm');
+        this.context = { $implicit: value };
+        // Through `style`, so an item pushed without one still gets the contrast modifier rather than
+        // no class at all.
+        this.styleClass = `kbq-notification-item_${this.style}`;
+        // `DateAdapter.parse` returns null for anything it does not recognise, and every adapter throws
+        // when that null reaches `format` — which would take the whole panel down with it.
+        const parsed = this.adapter.parse(value.date, '');
+        this.time = parsed !== null && this.adapter.isValid(parsed) ? this.adapter.format(parsed, 'HH:mm') : '';
+    }
+    ngOnChanges(changes) {
+        // A bound input is handed to its member; unbound, it leaves what code wrote.
+        if (changes['dataInput']) {
+            const data = this.dataInput();
+            if (data !== undefined)
+                this.data = data;
+        }
     }
     constructor() {
         this.adapter = inject(DateAdapter);
         this.service = inject(KbqNotificationCenterService);
         this.readStateDirective = inject(KbqReadStateDirective, { host: true });
-        this.center = inject(KbqNotificationCenterComponent, { host: true });
-        this.popUpPlacements = PopUpPlacements;
-        this.themePalette = ThemePalette;
-        this.id = id++;
-        this.$implicit = this;
+        this.panel = inject(KBQ_NOTIFICATION_CENTER_PANEL);
+        /** Style modifier class of the host, recomputed with `data` instead of allocated on every check. */
+        this.styleClass = '';
+        /** @docs-private */
+        this.dataInput = input(undefined, { ...(ngDevMode ? { debugName: "dataInput" } : /* istanbul ignore next */ {}), alias: 'data' });
         this.readStateDirective.read
             .pipe(filter((value) => value), takeUntilDestroyed())
             .subscribe(() => {
@@ -267,30 +451,33 @@ class KbqNotificationItemComponent {
             this.service.onRead.next(this.data);
         });
     }
+    /** Removes this notification, keeping keyboard focus inside the panel once the button unmounts. */
+    remove() {
+        this.panel.restoreFocusAfterRemove();
+        this.service.remove(this.data);
+    }
     isTemplateRef(value) {
         return value instanceof TemplateRef;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNotificationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqNotificationItemComponent, isStandalone: true, selector: "kbq-notification-item", inputs: { data: "data" }, host: { attributes: { "data-testid": "kbq-notification-item" }, properties: { "class": "style" }, classAttribute: "kbq-notification-item" }, hostDirectives: [{ directive: i1$1.KbqReadStateDirective }], ngImport: i0, template: "@if (data.icon) {\n    <div class=\"kbq-notification-item__icon-container layout-row layout-align-start-start\">\n        @if (data.icon === true) {\n            @switch (data.style) {\n                @case ('contrast') {\n                    <i\n                        kbq-icon=\"kbq-circle-info_16\"\n                        class=\"kbq-notification-item__icon\"\n                        [color]=\"$any(data.style)\"\n                        [class]=\"data.iconClass\"\n                    ></i>\n                }\n                @case ('success') {\n                    <i\n                        kbq-icon=\"kbq-circle-check_16\"\n                        class=\"kbq-notification-item__icon\"\n                        [color]=\"$any(data.style)\"\n                        [class]=\"data.iconClass\"\n                    ></i>\n                }\n                @case ('warning') {\n                    <i\n                        kbq-icon=\"kbq-triangle-exclamation_16\"\n                        class=\"kbq-notification-item__icon\"\n                        [color]=\"$any(data.style)\"\n                        [class]=\"data.iconClass\"\n                    ></i>\n                }\n                @case ('error') {\n                    <i\n                        kbq-icon=\"kbq-triangle-exclamation_16\"\n                        class=\"kbq-notification-item__icon\"\n                        [color]=\"$any(data.style)\"\n                        [class]=\"data.iconClass\"\n                    ></i>\n                }\n            }\n        } @else if (isTemplateRef(data.icon)) {\n            <ng-container [ngTemplateOutlet]=\"$any(data.icon)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n        }\n    </div>\n}\n\n<div class=\"kbq-notification-item__container\">\n    @if (data.title) {\n        <div\n            kbq-title\n            class=\"kbq-notification-item__title\"\n            [class.kbq-notification-item__title_with-content]=\"data.caption || data.content\"\n        >\n            @if (isTemplateRef(data.title)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.title)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            } @else {\n                <p data-testid=\"kbq-notification-item-title\">{{ data.title }}</p>\n            }\n\n            <div\n                class=\"kbq-notification-item-time\"\n                data-testid=\"kbq-notification-item-time\"\n                [class.kbq-notification-item-time_read]=\"data.read\"\n            >\n                <div class=\"kbq-notification-item-time__value\" data-testid=\"kbq-notification-item-time-value\">\n                    {{ time }}\n                </div>\n                <i class=\"kbq-notification-item-time__state\" kbq-icon=\"kbq-circle-xs_16\" [color]=\"'theme'\"></i>\n            </div>\n        </div>\n    }\n\n    @if (data.caption) {\n        <div\n            kbq-title\n            [class.kbq-notification-item__text]=\"data.title\"\n            [class.kbq-notification-item__title]=\"!data.title\"\n        >\n            @if (isTemplateRef(data.caption)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.caption)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            } @else {\n                {{ data.caption }}\n            }\n        </div>\n    }\n\n    @if (data.content) {\n        <div class=\"kbq-notification-item__content\">\n            @if (isTemplateRef(data.content)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.content)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            } @else {\n                {{ data.content }}\n            }\n        </div>\n    }\n\n    @if (data.actions) {\n        <div class=\"kbq-notification-item__actions\">\n            @if (isTemplateRef(data.actions)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.actions)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            } @else {\n                {{ data.actions }}\n            }\n        </div>\n    }\n</div>\n\n<button\n    kbq-button\n    class=\"kbq-notification-item__remove-button\"\n    data-testid=\"kbq-notification-item-remove-button\"\n    [kbqStyle]=\"'transparent'\"\n    [color]=\"'contrast'\"\n    [kbqTooltipArrow]=\"false\"\n    [kbqTooltip]=\"center.localeData.remove\"\n    [kbqPlacement]=\"popUpPlacements.Right\"\n    (click)=\"service.remove(data)\"\n>\n    <i kbq-icon=\"kbq-trash_16\"></i>\n</button>\n", styles: [".kbq-notification-item{display:flex;box-sizing:border-box;position:relative;border-radius:var(--kbq-size-s);height:auto;margin-left:var(--kbq-size-m);margin-right:var(--kbq-size-m)}.kbq-notification-item:hover .kbq-notification-item-time,.kbq-notification-item:focus-within .kbq-notification-item-time{visibility:hidden}.kbq-notification-item:hover .kbq-notification-item__remove-button,.kbq-notification-item:focus-within .kbq-notification-item__remove-button{display:block}.kbq-notification-item__icon-container{flex-shrink:0;box-sizing:content-box;width:var(--kbq-size-l);max-width:var(--kbq-size-l);height:var(--kbq-size-l);max-height:var(--kbq-size-l);margin-right:var(--kbq-size-s);padding-left:var(--kbq-size-m);padding-top:14px}.kbq-notification-item__container{display:flex;flex-direction:column;flex:1;padding-top:var(--kbq-size-m);padding-right:var(--kbq-size-s);padding-bottom:var(--kbq-size-m);overflow:hidden}.kbq-notification-item__title{display:flex;flex-direction:row;justify-content:space-between;overflow:hidden;text-overflow:ellipsis}.kbq-notification-item__title>p{margin:0;overflow:hidden;text-overflow:ellipsis}.kbq-notification-item__title.kbq-notification-item__title_with-content{margin-bottom:var(--kbq-size-xxs)}.kbq-notification-item-time{display:flex;flex-direction:row;height:var(--kbq-size-xl);align-items:center;padding-left:22px}.kbq-notification-item-time .kbq-notification-item-time__value{margin-right:var(--kbq-size-3xs)}.kbq-notification-item-time.kbq-notification-item-time_read .kbq-notification-item-time__state{visibility:hidden;order:-1}.kbq-notification-item__text{display:flex;flex:1;align-items:center}.kbq-notification-item__content{display:flex;flex-direction:column;white-space:pre-wrap}.kbq-notification-item__actions{display:flex;padding-top:var(--kbq-size-s);gap:var(--kbq-size-m)}.kbq-notification-item__remove-button{position:absolute;top:var(--kbq-size-xs);right:var(--kbq-size-s);display:none}.kbq-notification-item{background:var(--kbq-background-card)}.kbq-notification-item .kbq-notification-item__title{color:var(--kbq-foreground-contrast)}.kbq-notification-item .kbq-notification-item__text,.kbq-notification-item .kbq-notification-item-time.kbq-notification-item-time_read .kbq-notification-item-time__value{color:var(--kbq-foreground-contrast-secondary)}.kbq-notification-item:hover{background:var(--kbq-states-background-transparent-hover)}.kbq-notification-item{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-notification-item .kbq-notification-item-time{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i1.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: i3.KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title"], exportAs: ["kbqTitle"] }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i3$1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i3$1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "directive", type: KbqTooltipTrigger, selector: "[kbqTooltip]", inputs: ["kbqTooltipScrollStrategy", "forDisabledComponent", "ignoreTooltipPointerEvents", "kbqTooltipSingleInstance", "hideWithTimeout", "kbqVisible", "kbqPlacement", "kbqRelativeToPointer", "kbqPlacementPriority", "kbqTooltip", "kbqTooltipDisabled", "kbqEnterDelay", "kbqLeaveDelay", "kbqTrigger", "kbqTooltipClass", "kbqTooltipContext", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipOffset", "kbqTooltipModifier", "kbqTooltipHeader"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqNotificationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqNotificationItemComponent, isStandalone: true, selector: "kbq-notification-item", inputs: { dataInput: { classPropertyName: "dataInput", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-testid": "kbq-notification-item" }, properties: { "class": "styleClass" }, classAttribute: "kbq-notification-item" }, usesOnChanges: true, hostDirectives: [{ directive: i1.KbqReadStateDirective }], ngImport: i0, template: "@if (icon) {\n    <div class=\"kbq-notification-item__icon-container layout-row layout-align-start-start\">\n        @if (icon === true) {\n            @switch (style) {\n                @case ('contrast') {\n                    <i\n                        kbq-icon=\"kbq-circle-info_16\"\n                        class=\"kbq-notification-item__icon\"\n                        [color]=\"'contrast'\"\n                        [class]=\"data.iconClass\"\n                    ></i>\n                }\n                @case ('success') {\n                    <i\n                        kbq-icon=\"kbq-circle-check_16\"\n                        class=\"kbq-notification-item__icon\"\n                        [color]=\"'success'\"\n                        [class]=\"data.iconClass\"\n                    ></i>\n                }\n                @case ('warning') {\n                    <i\n                        kbq-icon=\"kbq-triangle-exclamation_16\"\n                        class=\"kbq-notification-item__icon\"\n                        [color]=\"'warning'\"\n                        [class]=\"data.iconClass\"\n                    ></i>\n                }\n                @case ('error') {\n                    <i\n                        kbq-icon=\"kbq-triangle-exclamation_16\"\n                        class=\"kbq-notification-item__icon\"\n                        [color]=\"'error'\"\n                        [class]=\"data.iconClass\"\n                    ></i>\n                }\n            }\n        } @else if (isTemplateRef(icon)) {\n            <ng-container [ngTemplateOutlet]=\"$any(icon)\" [ngTemplateOutletContext]=\"context\" />\n        }\n    </div>\n}\n\n<div class=\"kbq-notification-item__container\">\n    @if (data.title) {\n        <div\n            kbq-title\n            class=\"kbq-notification-item__title\"\n            [class.kbq-notification-item__title_with-content]=\"data.caption || data.content\"\n        >\n            @if (isTemplateRef(data.title)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.title)\" [ngTemplateOutletContext]=\"context\" />\n            } @else {\n                <p data-testid=\"kbq-notification-item-title\">{{ data.title }}</p>\n            }\n\n            @if (!read) {\n                <!-- Unread is otherwise conveyed by the dot below alone. It sits outside the time block\n                because that block is visually hidden while the row is hovered or focused, which would\n                take the text out of the accessibility tree with it. -->\n                <span class=\"cdk-visually-hidden\">{{ panel.localeConfiguration().unread }}</span>\n            }\n\n            <div\n                class=\"kbq-notification-item-time\"\n                data-testid=\"kbq-notification-item-time\"\n                [class.kbq-notification-item-time_read]=\"read\"\n            >\n                <div class=\"kbq-notification-item-time__value\" data-testid=\"kbq-notification-item-time-value\">\n                    {{ time }}\n                </div>\n                <i\n                    class=\"kbq-notification-item-time__state\"\n                    kbq-icon=\"kbq-circle-xs_16\"\n                    aria-hidden=\"true\"\n                    [color]=\"'theme'\"\n                ></i>\n            </div>\n        </div>\n    }\n\n    @if (data.caption) {\n        <div\n            kbq-title\n            [class.kbq-notification-item__text]=\"data.title\"\n            [class.kbq-notification-item__title]=\"!data.title\"\n        >\n            @if (isTemplateRef(data.caption)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.caption)\" [ngTemplateOutletContext]=\"context\" />\n            } @else {\n                {{ data.caption }}\n            }\n        </div>\n    }\n\n    @if (data.content) {\n        <div class=\"kbq-notification-item__content\">\n            @if (isTemplateRef(data.content)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.content)\" [ngTemplateOutletContext]=\"context\" />\n            } @else {\n                {{ data.content }}\n            }\n        </div>\n    }\n\n    @if (data.actions) {\n        <div class=\"kbq-notification-item__actions\">\n            @if (isTemplateRef(data.actions)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.actions)\" [ngTemplateOutletContext]=\"context\" />\n            } @else {\n                {{ data.actions }}\n            }\n        </div>\n    }\n</div>\n\n<button\n    kbq-button\n    class=\"kbq-notification-item__remove-button\"\n    data-testid=\"kbq-notification-item-remove-button\"\n    [attr.aria-label]=\"panel.localeConfiguration().remove\"\n    [kbqStyle]=\"'transparent'\"\n    [color]=\"'contrast'\"\n    (click)=\"remove()\"\n>\n    <i kbq-icon=\"kbq-trash_16\"></i>\n</button>\n", styles: [".kbq-notification-item{display:flex;box-sizing:border-box;position:relative;border-radius:var(--kbq-size-s)}@supports (corner-shape: squircle){.kbq-notification-item{corner-shape:squircle;border-radius:clamp(var(--kbq-size-s) * 1.85,var(--kbq-size-s) * 2.3 - 3.6px,var(--kbq-size-s) * 2)}}.kbq-notification-item{height:auto;margin-left:var(--kbq-size-m);margin-right:var(--kbq-size-m)}.kbq-notification-item:hover .kbq-notification-item-time,.kbq-notification-item:focus-within .kbq-notification-item-time{visibility:hidden}.kbq-notification-item:hover .kbq-notification-item__remove-button,.kbq-notification-item:focus-within .kbq-notification-item__remove-button{opacity:1;pointer-events:auto}.kbq-notification-item__icon-container{flex-shrink:0;box-sizing:content-box;width:var(--kbq-size-l);max-width:var(--kbq-size-l);height:var(--kbq-size-l);max-height:var(--kbq-size-l);margin-right:var(--kbq-size-s);padding-left:var(--kbq-size-m);padding-top:var(--kbq-notification-center-size-item-icon-padding-top)}.kbq-notification-item__container{display:flex;flex-direction:column;flex:1;padding-top:var(--kbq-size-m);padding-right:var(--kbq-size-s);padding-bottom:var(--kbq-size-m);overflow:hidden}.kbq-notification-item__title{display:flex;flex-direction:row;justify-content:space-between;overflow:hidden;text-overflow:ellipsis}.kbq-notification-item__title>p{margin:0;overflow:hidden;text-overflow:ellipsis}.kbq-notification-item__title.kbq-notification-item__title_with-content{margin-bottom:var(--kbq-size-xxs)}.kbq-notification-item-time{display:flex;flex-direction:row;height:var(--kbq-size-xl);align-items:center;padding-left:var(--kbq-notification-center-size-item-time-padding-left)}.kbq-notification-item-time .kbq-notification-item-time__value{margin-right:var(--kbq-size-3xs)}.kbq-notification-item-time.kbq-notification-item-time_read .kbq-notification-item-time__state{visibility:hidden;order:-1}.kbq-notification-item__text{display:flex;flex:1;align-items:center}.kbq-notification-item__content{display:flex;flex-direction:column;white-space:pre-wrap}.kbq-notification-item__actions{display:flex;padding-top:var(--kbq-size-s);gap:var(--kbq-size-m)}.kbq-notification-item__remove-button{position:absolute;top:var(--kbq-size-xs);right:var(--kbq-size-s);display:block;opacity:0;pointer-events:none}.kbq-notification-item{background:var(--kbq-background-card)}.kbq-notification-item .kbq-notification-item__title{color:var(--kbq-foreground-contrast)}.kbq-notification-item .kbq-notification-item__text,.kbq-notification-item .kbq-notification-item-time.kbq-notification-item-time_read .kbq-notification-item-time__value{color:var(--kbq-foreground-contrast-secondary)}.kbq-notification-item:hover,.kbq-notification-item:focus-within{background:var(--kbq-states-background-transparent-hover)}.kbq-notification-item{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-notification-item .kbq-notification-item-time{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2.KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: i3.KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title", "ignoreTooltipPointerEvents"], exportAs: ["kbqTitle"] }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i3$1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i3$1.KbqButtonCssStyler, selector: "[kbq-button]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNotificationItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqNotificationItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-notification-item', imports: [
                         NgTemplateOutlet,
                         KbqIconModule,
                         KbqTitleModule,
-                        KbqButtonModule,
-                        KbqTooltipTrigger
+                        KbqButtonModule
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-notification-item',
-                        '[class]': 'style',
+                        '[class]': 'styleClass',
                         'data-testid': 'kbq-notification-item'
-                    }, hostDirectives: [KbqReadStateDirective], template: "@if (data.icon) {\n    <div class=\"kbq-notification-item__icon-container layout-row layout-align-start-start\">\n        @if (data.icon === true) {\n            @switch (data.style) {\n                @case ('contrast') {\n                    <i\n                        kbq-icon=\"kbq-circle-info_16\"\n                        class=\"kbq-notification-item__icon\"\n                        [color]=\"$any(data.style)\"\n                        [class]=\"data.iconClass\"\n                    ></i>\n                }\n                @case ('success') {\n                    <i\n                        kbq-icon=\"kbq-circle-check_16\"\n                        class=\"kbq-notification-item__icon\"\n                        [color]=\"$any(data.style)\"\n                        [class]=\"data.iconClass\"\n                    ></i>\n                }\n                @case ('warning') {\n                    <i\n                        kbq-icon=\"kbq-triangle-exclamation_16\"\n                        class=\"kbq-notification-item__icon\"\n                        [color]=\"$any(data.style)\"\n                        [class]=\"data.iconClass\"\n                    ></i>\n                }\n                @case ('error') {\n                    <i\n                        kbq-icon=\"kbq-triangle-exclamation_16\"\n                        class=\"kbq-notification-item__icon\"\n                        [color]=\"$any(data.style)\"\n                        [class]=\"data.iconClass\"\n                    ></i>\n                }\n            }\n        } @else if (isTemplateRef(data.icon)) {\n            <ng-container [ngTemplateOutlet]=\"$any(data.icon)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n        }\n    </div>\n}\n\n<div class=\"kbq-notification-item__container\">\n    @if (data.title) {\n        <div\n            kbq-title\n            class=\"kbq-notification-item__title\"\n            [class.kbq-notification-item__title_with-content]=\"data.caption || data.content\"\n        >\n            @if (isTemplateRef(data.title)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.title)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            } @else {\n                <p data-testid=\"kbq-notification-item-title\">{{ data.title }}</p>\n            }\n\n            <div\n                class=\"kbq-notification-item-time\"\n                data-testid=\"kbq-notification-item-time\"\n                [class.kbq-notification-item-time_read]=\"data.read\"\n            >\n                <div class=\"kbq-notification-item-time__value\" data-testid=\"kbq-notification-item-time-value\">\n                    {{ time }}\n                </div>\n                <i class=\"kbq-notification-item-time__state\" kbq-icon=\"kbq-circle-xs_16\" [color]=\"'theme'\"></i>\n            </div>\n        </div>\n    }\n\n    @if (data.caption) {\n        <div\n            kbq-title\n            [class.kbq-notification-item__text]=\"data.title\"\n            [class.kbq-notification-item__title]=\"!data.title\"\n        >\n            @if (isTemplateRef(data.caption)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.caption)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            } @else {\n                {{ data.caption }}\n            }\n        </div>\n    }\n\n    @if (data.content) {\n        <div class=\"kbq-notification-item__content\">\n            @if (isTemplateRef(data.content)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.content)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            } @else {\n                {{ data.content }}\n            }\n        </div>\n    }\n\n    @if (data.actions) {\n        <div class=\"kbq-notification-item__actions\">\n            @if (isTemplateRef(data.actions)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.actions)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            } @else {\n                {{ data.actions }}\n            }\n        </div>\n    }\n</div>\n\n<button\n    kbq-button\n    class=\"kbq-notification-item__remove-button\"\n    data-testid=\"kbq-notification-item-remove-button\"\n    [kbqStyle]=\"'transparent'\"\n    [color]=\"'contrast'\"\n    [kbqTooltipArrow]=\"false\"\n    [kbqTooltip]=\"center.localeData.remove\"\n    [kbqPlacement]=\"popUpPlacements.Right\"\n    (click)=\"service.remove(data)\"\n>\n    <i kbq-icon=\"kbq-trash_16\"></i>\n</button>\n", styles: [".kbq-notification-item{display:flex;box-sizing:border-box;position:relative;border-radius:var(--kbq-size-s);height:auto;margin-left:var(--kbq-size-m);margin-right:var(--kbq-size-m)}.kbq-notification-item:hover .kbq-notification-item-time,.kbq-notification-item:focus-within .kbq-notification-item-time{visibility:hidden}.kbq-notification-item:hover .kbq-notification-item__remove-button,.kbq-notification-item:focus-within .kbq-notification-item__remove-button{display:block}.kbq-notification-item__icon-container{flex-shrink:0;box-sizing:content-box;width:var(--kbq-size-l);max-width:var(--kbq-size-l);height:var(--kbq-size-l);max-height:var(--kbq-size-l);margin-right:var(--kbq-size-s);padding-left:var(--kbq-size-m);padding-top:14px}.kbq-notification-item__container{display:flex;flex-direction:column;flex:1;padding-top:var(--kbq-size-m);padding-right:var(--kbq-size-s);padding-bottom:var(--kbq-size-m);overflow:hidden}.kbq-notification-item__title{display:flex;flex-direction:row;justify-content:space-between;overflow:hidden;text-overflow:ellipsis}.kbq-notification-item__title>p{margin:0;overflow:hidden;text-overflow:ellipsis}.kbq-notification-item__title.kbq-notification-item__title_with-content{margin-bottom:var(--kbq-size-xxs)}.kbq-notification-item-time{display:flex;flex-direction:row;height:var(--kbq-size-xl);align-items:center;padding-left:22px}.kbq-notification-item-time .kbq-notification-item-time__value{margin-right:var(--kbq-size-3xs)}.kbq-notification-item-time.kbq-notification-item-time_read .kbq-notification-item-time__state{visibility:hidden;order:-1}.kbq-notification-item__text{display:flex;flex:1;align-items:center}.kbq-notification-item__content{display:flex;flex-direction:column;white-space:pre-wrap}.kbq-notification-item__actions{display:flex;padding-top:var(--kbq-size-s);gap:var(--kbq-size-m)}.kbq-notification-item__remove-button{position:absolute;top:var(--kbq-size-xs);right:var(--kbq-size-s);display:none}.kbq-notification-item{background:var(--kbq-background-card)}.kbq-notification-item .kbq-notification-item__title{color:var(--kbq-foreground-contrast)}.kbq-notification-item .kbq-notification-item__text,.kbq-notification-item .kbq-notification-item-time.kbq-notification-item-time_read .kbq-notification-item-time__value{color:var(--kbq-foreground-contrast-secondary)}.kbq-notification-item:hover{background:var(--kbq-states-background-transparent-hover)}.kbq-notification-item{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-notification-item .kbq-notification-item-time{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { data: [{
-                type: Input
-            }] } });
+                    }, hostDirectives: [KbqReadStateDirective], template: "@if (icon) {\n    <div class=\"kbq-notification-item__icon-container layout-row layout-align-start-start\">\n        @if (icon === true) {\n            @switch (style) {\n                @case ('contrast') {\n                    <i\n                        kbq-icon=\"kbq-circle-info_16\"\n                        class=\"kbq-notification-item__icon\"\n                        [color]=\"'contrast'\"\n                        [class]=\"data.iconClass\"\n                    ></i>\n                }\n                @case ('success') {\n                    <i\n                        kbq-icon=\"kbq-circle-check_16\"\n                        class=\"kbq-notification-item__icon\"\n                        [color]=\"'success'\"\n                        [class]=\"data.iconClass\"\n                    ></i>\n                }\n                @case ('warning') {\n                    <i\n                        kbq-icon=\"kbq-triangle-exclamation_16\"\n                        class=\"kbq-notification-item__icon\"\n                        [color]=\"'warning'\"\n                        [class]=\"data.iconClass\"\n                    ></i>\n                }\n                @case ('error') {\n                    <i\n                        kbq-icon=\"kbq-triangle-exclamation_16\"\n                        class=\"kbq-notification-item__icon\"\n                        [color]=\"'error'\"\n                        [class]=\"data.iconClass\"\n                    ></i>\n                }\n            }\n        } @else if (isTemplateRef(icon)) {\n            <ng-container [ngTemplateOutlet]=\"$any(icon)\" [ngTemplateOutletContext]=\"context\" />\n        }\n    </div>\n}\n\n<div class=\"kbq-notification-item__container\">\n    @if (data.title) {\n        <div\n            kbq-title\n            class=\"kbq-notification-item__title\"\n            [class.kbq-notification-item__title_with-content]=\"data.caption || data.content\"\n        >\n            @if (isTemplateRef(data.title)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.title)\" [ngTemplateOutletContext]=\"context\" />\n            } @else {\n                <p data-testid=\"kbq-notification-item-title\">{{ data.title }}</p>\n            }\n\n            @if (!read) {\n                <!-- Unread is otherwise conveyed by the dot below alone. It sits outside the time block\n                because that block is visually hidden while the row is hovered or focused, which would\n                take the text out of the accessibility tree with it. -->\n                <span class=\"cdk-visually-hidden\">{{ panel.localeConfiguration().unread }}</span>\n            }\n\n            <div\n                class=\"kbq-notification-item-time\"\n                data-testid=\"kbq-notification-item-time\"\n                [class.kbq-notification-item-time_read]=\"read\"\n            >\n                <div class=\"kbq-notification-item-time__value\" data-testid=\"kbq-notification-item-time-value\">\n                    {{ time }}\n                </div>\n                <i\n                    class=\"kbq-notification-item-time__state\"\n                    kbq-icon=\"kbq-circle-xs_16\"\n                    aria-hidden=\"true\"\n                    [color]=\"'theme'\"\n                ></i>\n            </div>\n        </div>\n    }\n\n    @if (data.caption) {\n        <div\n            kbq-title\n            [class.kbq-notification-item__text]=\"data.title\"\n            [class.kbq-notification-item__title]=\"!data.title\"\n        >\n            @if (isTemplateRef(data.caption)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.caption)\" [ngTemplateOutletContext]=\"context\" />\n            } @else {\n                {{ data.caption }}\n            }\n        </div>\n    }\n\n    @if (data.content) {\n        <div class=\"kbq-notification-item__content\">\n            @if (isTemplateRef(data.content)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.content)\" [ngTemplateOutletContext]=\"context\" />\n            } @else {\n                {{ data.content }}\n            }\n        </div>\n    }\n\n    @if (data.actions) {\n        <div class=\"kbq-notification-item__actions\">\n            @if (isTemplateRef(data.actions)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.actions)\" [ngTemplateOutletContext]=\"context\" />\n            } @else {\n                {{ data.actions }}\n            }\n        </div>\n    }\n</div>\n\n<button\n    kbq-button\n    class=\"kbq-notification-item__remove-button\"\n    data-testid=\"kbq-notification-item-remove-button\"\n    [attr.aria-label]=\"panel.localeConfiguration().remove\"\n    [kbqStyle]=\"'transparent'\"\n    [color]=\"'contrast'\"\n    (click)=\"remove()\"\n>\n    <i kbq-icon=\"kbq-trash_16\"></i>\n</button>\n", styles: [".kbq-notification-item{display:flex;box-sizing:border-box;position:relative;border-radius:var(--kbq-size-s)}@supports (corner-shape: squircle){.kbq-notification-item{corner-shape:squircle;border-radius:clamp(var(--kbq-size-s) * 1.85,var(--kbq-size-s) * 2.3 - 3.6px,var(--kbq-size-s) * 2)}}.kbq-notification-item{height:auto;margin-left:var(--kbq-size-m);margin-right:var(--kbq-size-m)}.kbq-notification-item:hover .kbq-notification-item-time,.kbq-notification-item:focus-within .kbq-notification-item-time{visibility:hidden}.kbq-notification-item:hover .kbq-notification-item__remove-button,.kbq-notification-item:focus-within .kbq-notification-item__remove-button{opacity:1;pointer-events:auto}.kbq-notification-item__icon-container{flex-shrink:0;box-sizing:content-box;width:var(--kbq-size-l);max-width:var(--kbq-size-l);height:var(--kbq-size-l);max-height:var(--kbq-size-l);margin-right:var(--kbq-size-s);padding-left:var(--kbq-size-m);padding-top:var(--kbq-notification-center-size-item-icon-padding-top)}.kbq-notification-item__container{display:flex;flex-direction:column;flex:1;padding-top:var(--kbq-size-m);padding-right:var(--kbq-size-s);padding-bottom:var(--kbq-size-m);overflow:hidden}.kbq-notification-item__title{display:flex;flex-direction:row;justify-content:space-between;overflow:hidden;text-overflow:ellipsis}.kbq-notification-item__title>p{margin:0;overflow:hidden;text-overflow:ellipsis}.kbq-notification-item__title.kbq-notification-item__title_with-content{margin-bottom:var(--kbq-size-xxs)}.kbq-notification-item-time{display:flex;flex-direction:row;height:var(--kbq-size-xl);align-items:center;padding-left:var(--kbq-notification-center-size-item-time-padding-left)}.kbq-notification-item-time .kbq-notification-item-time__value{margin-right:var(--kbq-size-3xs)}.kbq-notification-item-time.kbq-notification-item-time_read .kbq-notification-item-time__state{visibility:hidden;order:-1}.kbq-notification-item__text{display:flex;flex:1;align-items:center}.kbq-notification-item__content{display:flex;flex-direction:column;white-space:pre-wrap}.kbq-notification-item__actions{display:flex;padding-top:var(--kbq-size-s);gap:var(--kbq-size-m)}.kbq-notification-item__remove-button{position:absolute;top:var(--kbq-size-xs);right:var(--kbq-size-s);display:block;opacity:0;pointer-events:none}.kbq-notification-item{background:var(--kbq-background-card)}.kbq-notification-item .kbq-notification-item__title{color:var(--kbq-foreground-contrast)}.kbq-notification-item .kbq-notification-item__text,.kbq-notification-item .kbq-notification-item-time.kbq-notification-item-time_read .kbq-notification-item-time__value{color:var(--kbq-foreground-contrast-secondary)}.kbq-notification-item:hover,.kbq-notification-item:focus-within{background:var(--kbq-states-background-transparent-hover)}.kbq-notification-item{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-notification-item .kbq-notification-item-time{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { dataInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
 
 const defaultOffsetX = 8;
+const defaultPlacement = PopUpPlacements.Right;
 /** Rate-limit window (ms) for the scroll-to-bottom check that drives infinite scroll. */
 const SCROLLED_TO_BOTTOM_AUDIT_TIME = 100;
 /**
@@ -304,13 +491,18 @@ const SCROLLED_TO_BOTTOM_AUDIT_TIME = 100;
  * 100% zoom one device pixel is wider than one CSS pixel, which scales the residual by ~1/zoom and
  * pushes it past 1. 2px covers zoom down to 50% and is imperceptible as a trigger threshold.
  *
- * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight
+ * See [`Element.scrollHeight`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight) on MDN.
  */
 const SCROLLED_TO_BOTTOM_TOLERANCE = 2;
-/**default configuration of notification-center */
-const KBQ_NOTIFICATION_CENTER_DEFAULT_CONFIGURATION = ruRULocaleData.notificationCenter;
-/** Injection Token for providing configuration of notification-center */
-const KBQ_NOTIFICATION_CENTER_CONFIGURATION = new InjectionToken('KbqNotificationCenterConfiguration');
+/** Custom property the panel height is published through, so the stylesheet stays the single owner. */
+const POPOVER_HEIGHT_PROPERTY = '--kbq-notification-center-popover-height';
+/** Delete buttons of the day groups and of the individual notifications. */
+const REMOVE_BUTTON_SELECTOR = '.kbq-notification-center-sub-header__button, .kbq-notification-item__remove-button';
+/**
+ * Rate-limit window (ms) the reposition scroll strategy runs on. The panel re-applies its
+ * stick-to-window styles on the same window, so the two stay in step.
+ */
+const SCROLL_REPOSITION_THROTTLE = 20;
 /** @docs-private */
 const KBQ_NOTIFICATION_CENTER_SCROLL_STRATEGY = new InjectionToken('kbq-notification-center-scroll-strategy', {
     providedIn: 'root',
@@ -318,59 +510,92 @@ const KBQ_NOTIFICATION_CENTER_SCROLL_STRATEGY = new InjectionToken('kbq-notifica
 });
 /** @docs-private */
 function kbqNotificationCenterScrollStrategyFactory(overlay) {
-    return () => overlay.scrollStrategies.reposition({ scrollThrottle: 20 });
+    return () => overlay.scrollStrategies.reposition({ scrollThrottle: SCROLL_REPOSITION_THROTTLE });
 }
 /** @docs-private */
-const KBQ_NOTIFICATION_CENTER_SCROLL_STRATEGY_FACTORY_PROVIDER = {
-    provide: KBQ_NOTIFICATION_CENTER_SCROLL_STRATEGY,
-    deps: [Overlay],
-    useFactory: kbqNotificationCenterScrollStrategyFactory
-};
-/** @docs-private */
 class KbqNotificationCenterComponent extends KbqPopUp {
-    /** localized data
-     * @docs-private */
-    get localeData() {
-        return this.configuration;
+    /**
+     * Text of the panel's single live region. The panel keeps one persistent region and only changes
+     * its text, because a region inserted together with its content is not reliably announced.
+     *
+     * @docs-private
+     */
+    get statusMessage() {
+        // Branch in the template's own order, or the region announces a state that is not on screen:
+        // the full-screen error wins over everything, then the full-screen loader, then the bottom
+        // spinner, then the bottom error row, and only an otherwise idle empty list reads as empty.
+        if (this.service.errorMode()) {
+            return this.localeConfiguration().failedToLoadNotifications;
+        }
+        if (this.service.loadingMode() || this.service.loadingMore()) {
+            return this.localeConfiguration().loadingMore;
+        }
+        if (this.service.loadMoreErrorMode()) {
+            return this.localeConfiguration().failedToLoadNotifications;
+        }
+        return this.service.empty() ? this.localeConfiguration().noNotifications : '';
     }
     get popoverHeight() {
         return this._popoverHeight;
     }
     set popoverHeight(value) {
         this._popoverHeight = value;
-        this.elementRef.nativeElement.style.height = value;
+        if (value) {
+            this.renderer.setStyle(this.elementRef.nativeElement, POPOVER_HEIGHT_PROPERTY, value, RendererStyleFlags2.DashCase);
+        }
+        else {
+            this.renderer.removeStyle(this.elementRef.nativeElement, POPOVER_HEIGHT_PROPERTY, RendererStyleFlags2.DashCase);
+        }
     }
     constructor() {
         super();
         /** @docs-private */
-        this.changeDetectorRef = inject(ChangeDetectorRef);
-        /** @docs-private */
-        this.localeService = inject(KBQ_LOCALE_SERVICE, { optional: true });
-        /** @docs-private */
-        this.dateAdapter = inject(DateAdapter);
-        /** @docs-private */
         this.service = inject(KbqNotificationCenterService);
-        this.externalConfiguration = inject(KBQ_NOTIFICATION_CENTER_CONFIGURATION, { optional: true });
-        /** Distance in pixels from the bottom of the list at which the next page is requested.
-         * @docs-private */
+        this.injector = inject(Injector);
+        this.ngZone = inject(NgZone);
+        this.idGenerator = inject(_IdGenerator);
+        this.scrollDispatcher = inject(ScrollDispatcher);
+        this.document = inject(DOCUMENT);
+        this.focusMonitor = inject(FocusMonitor);
+        this.inputModalityDetector = inject(InputModalityDetector);
+        this.carrier = inject(KbqLocaleOverridesDirective, { self: true });
+        /**
+         * Accessible names for the icon-only toolbar buttons.
+         *
+         * @docs-private
+         */
+        this.a11yLocaleConfiguration = this.carrier.read('a11y', KBQ_A11Y_LOCALE_CONFIGURATION);
+        /**
+         * Localized strings of the notification center.
+         *
+         * Read through a signal so that a runtime `setLocale()` reaches `KbqNotificationItemComponent`, which
+         * renders these strings from its own `OnPush` view: a `markForCheck()` here would mark this component
+         * only, never the already-rendered items.
+         */
+        this.localeConfiguration = this.carrier.read('notificationCenter', KBQ_NOTIFICATION_CENTER_LOCALE_CONFIGURATION);
+        /**
+         * Id of the panel heading, referenced by the host's `aria-labelledby`.
+         *
+         * @docs-private
+         */
+        this.titleId = this.idGenerator.getId('kbq-notification-center-title-');
+        /**
+         * Distance in pixels from the bottom of the list at which the next page is requested.
+         *
+         * @docs-private
+         */
         this.scrolledToBottomOffset = 0;
-        /** Emits on every scroll of the list container; drives the scroll-to-bottom check. */
-        this.scroll$ = new Subject();
+        /** Re-measures the list outside of a scroll event: on first render and whenever the state changes. */
+        /** Whether a re-measurement is already queued for the next render. */
+        this.scrolledToBottomRecheckPending = false;
+        this.scrolledToBottomRecheck = new Subject();
         /** @docs-private */
         this.prefix = 'kbq-notification-center';
         /** @docs-private */
         this.isTrapFocus = false;
         this.switcher = viewChild.required('notificationSwitcher');
         /** Scrollable list container; used to measure scroll position for infinite scroll. */
-        this.scrollContainer = viewChild.required(KbqScrollbar);
-        this.updateLocaleParams = () => {
-            this.configuration = this.externalConfiguration || this.localeService?.getParams('notificationCenter');
-            this.changeDetectorRef.markForCheck();
-        };
-        this.localeService?.changes.pipe(takeUntilDestroyed()).subscribe(this.updateLocaleParams);
-        if (!this.localeService) {
-            this.initDefaultParams();
-        }
+        this.scrollContainer = viewChild.required(KbqScrollbarViewport);
     }
     ngAfterViewInit() {
         this.visibleChange.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((state) => {
@@ -379,21 +604,90 @@ class KbqNotificationCenterComponent extends KbqPopUp {
             }
             this.setStickPosition();
         });
+        // The reposition scroll strategy rewrites the pane's top/left/bottom/right on every scroll the
+        // application makes — including the panel's own list, which is a registered `CdkScrollable` —
+        // wiping the manual styles `setStickPosition()` writes. This subscription is created after the
+        // strategy has been enabled (`OverlayRef.attach()` runs before the panel's first change
+        // detection), so on the same audit window it re-applies them behind the strategy.
+        // The panel is also rendered on its own, without a trigger, so the guard covers more than the
+        // absent `stickToWindow`.
+        this.scrollDispatcher
+            .scrolled(SCROLL_REPOSITION_THROTTLE)
+            .pipe(filter(() => !!this.trigger?.stickToWindow), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.setStickPosition());
         this.service.changes
             .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => this.changeDetectorRef.markForCheck());
-        this.switcher().focus();
+            .subscribe(() => this.scheduleScrolledToBottomCheck());
+        // Focused with the modality the user actually opened the panel with, so a keyboard-driven open
+        // keeps its focus ring while a click does not. Not `KbqButton.focusViaKeyboard()`, which hardcodes
+        // `'keyboard'` and paints the ring on the toggle for a mouse user, and not FocusMonitor's own last
+        // origin, which reports `program` for a click landing outside its detection window (same rule as
+        // `KbqBasePipe.currentFocusOrigin`).
+        const switcher = this.switcher();
+        // Mirrors `focusViaKeyboard()`'s own early return, which this no longer goes through.
+        if (!switcher.disabled) {
+            this.focusMonitor.focusVia(switcher.getHostElement(), this.inputModalityDetector.mostRecentModality ?? 'program');
+        }
         this.subscribeToScrolledToBottom();
         this.subscribeToRevealLoadMoreRow();
+        // A first page too short to overflow the viewport produces no scroll event at all, so measure
+        // once the panel has rendered or infinite scroll would never start.
+        this.scheduleScrolledToBottomCheck();
+    }
+    /**
+     * Removes a whole day group, keeping keyboard focus inside the panel.
+     *
+     * @docs-private
+     */
+    removeGroup(group) {
+        this.restoreFocusAfterRemove();
+        this.service.removeGroup(group);
+    }
+    /**
+     * Removes every notification, keeping keyboard focus inside the panel.
+     *
+     * @docs-private
+     */
+    removeAll() {
+        this.restoreFocusAfterRemove();
+        this.service.removeAll();
+    }
+    /**
+     * Moves focus to a surviving delete button — or to the list container when the last one is gone —
+     * once the removal has rendered. Without it, focus falls back to `<body>` and the Escape handler
+     * and the rest of the panel become unreachable.
+     */
+    restoreFocusAfterRemove() {
+        // Read before the removal renders, while the activated button is still in the DOM: its place in
+        // document order is what decides where focus goes next. Asking for the first match afterwards
+        // would always answer with the first day group's "delete this day" button, wherever the user
+        // actually was — a destructive control they never aimed at, hidden behind that group's own
+        // sticky header.
+        const removedIndex = this.getRemoveButtons().indexOf(this.document.activeElement);
+        afterNextRender(() => {
+            const survivors = this.getRemoveButtons();
+            // The button that took the removed one's place, or the last one before it. A removal
+            // that did not start from a delete button — or that took the last one with it — falls
+            // back to the list container, which keeps the panel operable without parking focus on
+            // an arbitrary destructive control.
+            const survivor = removedIndex < 0 ? undefined : survivors[removedIndex] || survivors[survivors.length - 1];
+            if (survivor) {
+                survivor.focus();
+            }
+            else {
+                this.focusScrollContainer();
+            }
+        }, { injector: this.injector });
     }
-    /** Handles the list container scroll: feeds the scroll-to-bottom check that drives infinite scroll.
-     * Overflow shadows are handled declaratively by the `kbqOverflowShadow*` directives.
-     * @docs-private */
-    onContainerScroll() {
-        this.scroll$.next();
+    /** Delete buttons of the day groups and of the individual notifications, in document order. */
+    getRemoveButtons() {
+        return Array.from(this.elementRef.nativeElement.querySelectorAll(REMOVE_BUTTON_SELECTOR));
     }
-    /** Retries loading the next page from the bottom error row.
-     * @docs-private */
+    /**
+     * Retries loading the next page from the bottom error row.
+     *
+     * @docs-private
+     */
     retryLoadMore() {
         // The retry button is about to unmount; keep keyboard focus inside the panel instead of
         // letting it fall back to <body>.
@@ -401,57 +695,88 @@ class KbqNotificationCenterComponent extends KbqPopUp {
         // Clear the bottom error state here so the spinner and the error row can never be shown at
         // the same time, regardless of what the consumer's `onNextPage` handler does.
         this.service.setLoadMoreErrorMode(false);
-        this.service.onNextPage.emit();
+        this.service.onNextPage.next();
     }
     /**
      * Requests the next page (via `service.onNextPage`) once the list is scrolled to within
      * `scrolledToBottomOffset` pixels of the bottom. Two triggers feed it: the user scrolling, and a
-     * page finishing loading. The latter keeps paging when a freshly loaded page is too short to
-     * overflow the viewport — otherwise no further scroll event would fire and pagination would
-     * stall. Suppressed while a load is in flight, errored, or when there is nothing more to load.
+     * re-measurement after the panel's state has rendered. The latter keeps paging when a freshly
+     * loaded page is too short to overflow the viewport — otherwise no further scroll event would fire
+     * and pagination would stall. Suppressed while a load is in flight, errored, or when there is
+     * nothing more to load.
      */
     subscribeToScrolledToBottom() {
-        const scrolledToBottom$ = this.scroll$.pipe(auditTime(SCROLLED_TO_BOTTOM_AUDIT_TIME), map(() => this.isScrolledToBottom()), distinctUntilChanged(), filter(Boolean));
-        // Re-measure once a load completes (and the appended items have rendered): if the list still
-        // sits at the bottom, continue paging instead of waiting for a scroll event that never comes.
-        const loadCompleted$ = this.service.loadingMore.pipe(distinctUntilChanged(), pairwise(), filter(([wasLoading, isLoading]) => wasLoading && !isLoading), auditTime(SCROLLED_TO_BOTTOM_AUDIT_TIME), filter(() => this.isScrolledToBottom()));
-        merge(scrolledToBottom$, loadCompleted$)
+        const scrolledToBottom$ = this.scrollContainer().scrollChanges.pipe(auditTime(SCROLLED_TO_BOTTOM_AUDIT_TIME), map(() => this.isScrolledToBottom()), distinctUntilChanged(), filter(Boolean));
+        // Deliberately without `distinctUntilChanged`: a re-measurement that finds the list still at
+        // the bottom must keep paging even though the previous measurement said the same.
+        const rechecked$ = this.scrolledToBottomRecheck.pipe(auditTime(SCROLLED_TO_BOTTOM_AUDIT_TIME), filter(() => this.isScrolledToBottom()));
+        merge(scrolledToBottom$, rechecked$)
             .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => this.requestNextPage());
+            // `scrollChanges` is `CdkScrollable.elementScrolled()` and emits outside Angular's zone, so
+            // re-enter before touching consumer-facing state.
+            .subscribe(() => this.ngZone.run(() => this.requestNextPage()));
     }
-    /** Whether the list is scrolled to within `scrolledToBottomOffset` pixels of the bottom.
-     * Sub-pixel measurement error is absorbed by `SCROLLED_TO_BOTTOM_TOLERANCE`. */
+    /** Queues a re-measurement for after the next render, when the DOM reflects the new state. */
+    scheduleScrolledToBottomCheck() {
+        // At most one pending re-measurement: `requestNextPage` flips the service's own loading flags,
+        // which ping `changes` in turn, so an unguarded schedule feeds itself for as long as the list
+        // reports it is at the bottom — each render callback queueing the next one.
+        if (this.scrolledToBottomRecheckPending) {
+            return;
+        }
+        this.scrolledToBottomRecheckPending = true;
+        afterNextRender(() => {
+            this.scrolledToBottomRecheckPending = false;
+            this.scrolledToBottomRecheck.next();
+        }, { injector: this.injector });
+    }
+    /**
+     * Whether the list is scrolled to within `scrolledToBottomOffset` pixels of the bottom.
+     * Sub-pixel measurement error is absorbed by `SCROLLED_TO_BOTTOM_TOLERANCE`.
+     */
     isScrolledToBottom() {
-        const { scrollTop, clientHeight, scrollHeight } = this.scrollContainer().contentElement().nativeElement;
+        const { scrollTop, clientHeight, scrollHeight } = this.scrollContainer().getNativeElement();
+        // A container that has not been laid out yet has no bottom to reach. Without this guard the
+        // all-zero measurement reads as "at the bottom" and requests page after page into nothing.
+        if (clientHeight === 0) {
+            return false;
+        }
         return scrollHeight - scrollTop - clientHeight <= this.scrolledToBottomOffset + SCROLLED_TO_BOTTOM_TOLERANCE;
     }
     /** Emits `onNextPage` unless a load is already in flight, errored, or there is nothing more to load. */
     requestNextPage() {
-        if (this.service.hasMore.value && !this.service.loadingMore.value && !this.service.loadMoreErrorMode.value) {
-            this.service.onNextPage.emit();
+        if (this.service.hasMore() && !this.service.loadingMore() && !this.service.loadMoreErrorMode()) {
+            this.service.onNextPage.next();
         }
     }
     /**
      * Reveals the bottom "load more" spinner / error row when it first appears. Both rows are appended
      * below the last item and can land outside the viewport (the next page is requested while the user
      * is up to `scrolledToBottomOffset` px above the true bottom). Only a genuine false->true transition
-     * reveals the row: the BehaviorSubject's replayed current value is ignored (`pairwise` needs two
-     * emissions), so the panel always opens scrolled to the top — reopening it while a load-more error
-     * is still set never jumps to the bottom.
+     * after the panel opened reveals the row, so the panel always opens scrolled to the top — reopening
+     * it while a load-more error is still set never jumps to the bottom.
      */
     subscribeToRevealLoadMoreRow() {
-        const reveal = (source) => source.pipe(distinctUntilChanged(), pairwise(), filter(([wasShown, isShown]) => !wasShown && isShown), auditTime(SCROLLED_TO_BOTTOM_AUDIT_TIME));
-        merge(reveal(this.service.loadingMore), reveal(this.service.loadMoreErrorMode))
+        const reveal = (isShown) => {
+            let wasShown = isShown();
+            return this.service.changes.pipe(filter(() => {
+                const shown = isShown();
+                const appeared = shown && !wasShown;
+                wasShown = shown;
+                return appeared;
+            }), auditTime(SCROLLED_TO_BOTTOM_AUDIT_TIME));
+        };
+        merge(reveal(() => this.service.loadingMore()), reveal(() => this.service.loadMoreErrorMode()))
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(() => this.scrollToBottom());
     }
     /** Scrolls the list container to its bottom so a freshly-appended bottom row becomes visible. */
     scrollToBottom() {
-        const { scrollHeight } = this.scrollContainer().contentElement().nativeElement;
+        const { scrollHeight } = this.scrollContainer().getNativeElement();
         this.scrollContainer().scrollTo({ top: scrollHeight });
     }
     focusScrollContainer() {
-        const element = this.scrollContainer().contentElement().nativeElement;
+        const element = this.scrollContainer().getNativeElement();
         // tabindex -1 keeps the container out of the Tab order while allowing programmatic focus.
         element.setAttribute('tabindex', '-1');
         element.focus({ preventScroll: true });
@@ -464,70 +789,100 @@ class KbqNotificationCenterComponent extends KbqPopUp {
     updateTrapFocus(isTrapFocus) {
         this.isTrapFocus = isTrapFocus;
     }
-    /** @docs-private */
-    escapeHandler() {
+    /**
+     * Closes the panel on `Escape` inside it, unless a control there spent the key closing a popup of its own.
+     *
+     * @docs-private
+     */
+    escapeHandler(event) {
+        if (event?.defaultPrevented)
+            return;
+        // Spent, so that a container closing on Escape underneath, such as a sidepanel, stays open.
+        event?.preventDefault();
         this.hide(0);
     }
-    initDefaultParams() {
-        this.configuration = KBQ_NOTIFICATION_CENTER_DEFAULT_CONFIGURATION;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNotificationCenterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqNotificationCenterComponent, isStandalone: true, selector: "kbq-notification-center", host: { listeners: { "keydown.escape": "escapeHandler()" }, properties: { "class.kbq-notification-center_popover": "popoverMode" }, classAttribute: "kbq-notification-center" }, viewQueries: [{ propertyName: "switcher", first: true, predicate: ["notificationSwitcher"], descendants: true, isSignal: true }, { propertyName: "scrollContainer", first: true, predicate: KbqScrollbar, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"kbq-notification-center-header\">\n    <div class=\"kbq-notification-center-title\">\n        <div class=\"kbq-notification-center-title__text\">{{ localeData.notifications }}</div>\n        <button\n            #notificationSwitcher\n            kbq-button\n            class=\"kbq-notification-center-title__button\"\n            data-testid=\"kbq-notification-center-silent-mode-toggle\"\n            [kbqDropdownTriggerFor]=\"notificationSwitcherDropdown\"\n            [kbqTooltip]=\"service.silentMode.value ? localeData.doNotDisturb : localeData.showPopUpNotifications\"\n            [kbqTooltipArrow]=\"false\"\n            [kbqPlacement]=\"'right'\"\n            [kbqTooltipOffset]=\"4\"\n            [kbqStyle]=\"'transparent'\"\n            [color]=\"'contrast'\"\n        >\n            <i kbq-icon=\"{{ service.silentMode.value ? 'kbq-bell-slash_16' : 'kbq-bell_16' }}\"></i>\n        </button>\n    </div>\n    <div class=\"kbq-notification-center-toolbar\">\n        @if (!service.isEmpty) {\n            <button\n                kbq-button\n                class=\"kbq-notification-center-toolbar__button\"\n                data-testid=\"kbq-notification-center-remove-all-button\"\n                [kbqStyle]=\"'transparent'\"\n                [color]=\"'contrast'\"\n                (click)=\"service.removeAll()\"\n            >\n                <i kbq-icon=\"kbq-trash_16\"></i>\n            </button>\n\n            <kbq-divider [vertical]=\"true\" />\n        }\n\n        <button\n            kbq-button\n            class=\"kbq-notification-center-toolbar__button\"\n            data-testid=\"kbq-notification-center-close-button\"\n            [kbqStyle]=\"'transparent'\"\n            [color]=\"'contrast'\"\n            (click)=\"hide(0)\"\n        >\n            <i kbq-icon=\"kbq-xmark_16\"></i>\n        </button>\n    </div>\n</div>\n\n<div\n    #notificationCenterContainer=\"kbqOverflowShadowContainer\"\n    kbq-scrollbar\n    kbqOverflowShadowContainer\n    class=\"kbq-notification-center-container\"\n    data-testid=\"kbq-notification-center-container\"\n    [kbqOverflowShadowBottom]=\"notificationCenterContainer\"\n    [shadow]=\"'var(--kbq-shadow-overflow-normal-bottom)'\"\n    (onScroll)=\"onContainerScroll()\"\n>\n    @if (!service.errorMode.value) {\n        @if (!service.loadingMode.value) {\n            @for (group of service.groupedItems | async; track group) {\n                <div\n                    class=\"kbq-notification-center-sub-header\"\n                    data-testid=\"kbq-notification-center-group\"\n                    [kbqOverflowShadowTop]=\"$first ? notificationCenterContainer : undefined\"\n                >\n                    <div class=\"kbq-notification-center-sub-header__date\">{{ group.title }}</div>\n\n                    <button\n                        kbq-button\n                        class=\"kbq-notification-center-sub-header__button\"\n                        data-testid=\"kbq-notification-center-remove-group-button\"\n                        [kbqStyle]=\"'transparent'\"\n                        [color]=\"'contrast'\"\n                        [kbqTooltip]=\"localeData.remove\"\n                        [kbqPlacement]=\"'right'\"\n                        [kbqTooltipArrow]=\"false\"\n                        (click)=\"service.removeGroup(group)\"\n                    >\n                        <i kbq-icon=\"kbq-trash_16\"></i>\n                    </button>\n                </div>\n\n                @for (item of group.items; track item) {\n                    <kbq-notification-item [data]=\"item\" />\n                }\n            } @empty {\n                @if (!service.loadingMore.value) {\n                    <div class=\"kbq-notification-center-empty-container\" data-testid=\"kbq-notification-center-empty\">\n                        <i kbq-icon-item=\"kbq-bell_16\" [big]=\"true\" [color]=\"'contrast-fade'\"></i>\n                        {{ localeData.noNotifications }}\n                    </div>\n                }\n            }\n\n            @if (service.loadingMore.value) {\n                <div\n                    class=\"kbq-notification-center-load-more\"\n                    data-testid=\"kbq-notification-center-load-more\"\n                    role=\"status\"\n                    [attr.aria-label]=\"localeData.loadingMore\"\n                >\n                    <kbq-progress-spinner [mode]=\"'indeterminate'\" [size]=\"'compact'\" />\n                </div>\n            }\n\n            @if (service.loadMoreErrorMode.value) {\n                <div\n                    class=\"kbq-notification-center-load-more-error\"\n                    data-testid=\"kbq-notification-center-load-more-error\"\n                    role=\"alert\"\n                >\n                    {{ localeData.failedToLoadNotifications }}\n                    <button\n                        kbq-button\n                        data-testid=\"kbq-notification-center-load-more-retry-button\"\n                        [kbqStyle]=\"'transparent'\"\n                        [color]=\"'theme'\"\n                        (click)=\"retryLoadMore()\"\n                    >\n                        {{ localeData.repeat }}\n                    </button>\n                </div>\n            }\n        } @else {\n            <kbq-loader-overlay data-testid=\"kbq-notification-center-loader\" [transparent]=\"true\" />\n        }\n    } @else {\n        <div class=\"kbq-notification-center-error-container\" data-testid=\"kbq-notification-center-error\">\n            <i kbq-icon-item=\"kbq-bell_16\" [big]=\"true\" [color]=\"'error'\" [fade]=\"true\"></i>\n            {{ localeData.failedToLoadNotifications }}\n            <button\n                kbq-button\n                data-testid=\"kbq-notification-center-reload-button\"\n                [kbqStyle]=\"'transparent'\"\n                [color]=\"'theme'\"\n                (click)=\"service.onReload.emit()\"\n            >\n                {{ localeData.repeat }}\n            </button>\n        </div>\n    }\n</div>\n\n<kbq-dropdown #notificationSwitcherDropdown=\"kbqDropdown\">\n    <button\n        kbq-dropdown-item\n        data-testid=\"kbq-notification-center-show-notifications-button\"\n        (click)=\"service.setSilentMode(false)\"\n    >\n        <i kbq-icon=\"{{ !service.silentMode.value ? 'kbq-circle-xs_16' : '' }}\" [style.min-width.px]=\"16\"></i>\n        {{ localeData.showPopUpNotifications }}\n    </button>\n    <button\n        kbq-dropdown-item\n        data-testid=\"kbq-notification-center-do-not-disturb-button\"\n        (click)=\"service.setSilentMode(true)\"\n    >\n        <i kbq-icon=\"{{ service.silentMode.value ? 'kbq-circle-xs_16' : '' }}\" [style.min-width.px]=\"16\"></i>\n        {{ localeData.doNotDisturb }}\n    </button>\n</kbq-dropdown>\n", styles: [".kbq-notification-center{position:relative;display:flex;flex-direction:column;width:400px;height:100vh;box-sizing:border-box;z-index:1}.kbq-notification-center:not(.kbq-notification-center_popover){border-right:1px solid;border-left:1px solid}.kbq-notification-center.kbq-notification-center_popover{margin-top:var(--kbq-size-xxs);margin-bottom:var(--kbq-size-xxs);border-radius:var(--kbq-size-xs);height:calc(100vh - 48px);box-shadow:var(--kbq-shadow-popup)}.kbq-notification-center-header{display:flex;flex-direction:row;justify-content:space-between;padding:var(--kbq-size-m) var(--kbq-size-xl) var(--kbq-size-xxs) var(--kbq-size-xxl)}.kbq-notification-center-title{display:flex;flex-direction:row;align-items:center;gap:var(--kbq-size-xxs)}.kbq-notification-center-toolbar{display:flex;flex-direction:row;align-items:center}.kbq-notification-center-toolbar .kbq-divider.kbq-divider_vertical{height:var(--kbq-size-m)}.kbq-notification-center-sub-header{position:sticky;top:0;z-index:100;display:flex;flex-direction:row;padding:var(--kbq-size-s) var(--kbq-size-xl)}.kbq-notification-center-sub-header .kbq-notification-center-sub-header__button{position:absolute;top:0;right:var(--kbq-size-xl);display:none}.kbq-notification-center-sub-header:hover .kbq-notification-center-sub-header__button,.kbq-notification-center-sub-header:focus-within .kbq-notification-center-sub-header__button{display:flex}.kbq-notification-center-container{height:100%;border-radius:inherit;padding-bottom:var(--kbq-size-xl)}.kbq-notification-center-container [data-overlayscrollbars-viewport]{scroll-behavior:smooth}@media(prefers-reduced-motion:reduce){.kbq-notification-center-container [data-overlayscrollbars-viewport]{scroll-behavior:auto}}.kbq-notification-center-container .kbq-loader-overlay_parent{border-radius:inherit}.kbq-notification-center-load-more{display:flex;align-items:center;justify-content:center;padding:26px 0}.kbq-notification-center-load-more-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--kbq-size-xxs) var(--kbq-size-xxl);text-align:center}.kbq-notification-center-load-more-error .kbq-button{margin-top:var(--kbq-size-s)}.kbq-notification-center-empty-container,.kbq-notification-center-error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}.kbq-notification-center-empty-container .kbq-icon,.kbq-notification-center-error-container .kbq-icon{margin-bottom:var(--kbq-size-xl)}.kbq-notification-center-empty-container .kbq-button,.kbq-notification-center-error-container .kbq-button{margin-top:var(--kbq-size-s)}.kbq-notification-center,.kbq-notification-center-sub-header{background:var(--kbq-background-card)}.kbq-notification-center:not(.kbq-notification-center_popover),.kbq-notification-center-sub-header:not(.kbq-notification-center_popover){border-right-color:var(--kbq-line-contrast-less);border-left-color:var(--kbq-line-contrast-less)}.kbq-notification-center-error-container,.kbq-notification-center-load-more-error{color:var(--kbq-foreground-error)}.kbq-notification-center{font-size:var(--kbq-typography-text-normal-medium-font-size);font-style:var(--kbq-typography-text-normal-medium-font-style);font-weight:var(--kbq-typography-text-normal-medium-font-weight);line-height:var(--kbq-typography-text-normal-medium-line-height);font-family:var(--kbq-typography-text-normal-medium-font-family);text-transform:var(--kbq-typography-text-normal-medium-text-transform);font-feature-settings:var(--kbq-typography-text-normal-medium-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-medium-letter-spacing)}.kbq-notification-center-title__text{font-size:var(--kbq-typography-text-big-strong-font-size);font-style:var(--kbq-typography-text-big-strong-font-style);font-weight:var(--kbq-typography-text-big-strong-font-weight);line-height:var(--kbq-typography-text-big-strong-line-height);font-family:var(--kbq-typography-text-big-strong-font-family);text-transform:var(--kbq-typography-text-big-strong-text-transform);font-feature-settings:var(--kbq-typography-text-big-strong-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-strong-letter-spacing)}\n"], dependencies: [{ kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i1.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "component", type: i1.KbqIconItem, selector: "[kbq-icon-item]", inputs: ["kbq-icon-item", "fade", "big"] }, { kind: "ngmodule", type: KbqBadgeModule }, { kind: "ngmodule", type: KbqScrollbarModule }, { kind: "component", type: i2.KbqScrollbar, selector: "kbq-scrollbar, [kbq-scrollbar]", inputs: ["initializationTarget", "options", "events", "defer"], outputs: ["onInitialize", "onUpdate", "onDestroy", "onScroll"], exportAs: ["kbqScrollbar"] }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i3$1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i3$1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "directive", type: i3$1.KbqButtonDropdownTrigger, selector: "[kbq-button][kbqDropdownTriggerFor]" }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "component", type: i4.KbqDivider, selector: "kbq-divider", inputs: ["vertical", "paddings"] }, { kind: "ngmodule", type: KbqDropdownModule }, { kind: "component", type: i5.KbqDropdown, selector: "kbq-dropdown", inputs: ["navigationWithWrap", "xPosition", "yPosition", "overlapTriggerY", "overlapTriggerX", "hasBackdrop", "class", "backdropClass", "panelWidth", "panelMinWidth", "panelMaxWidth", "safeArea"], outputs: ["closed"], exportAs: ["kbqDropdown"] }, { kind: "component", type: i5.KbqDropdownItem, selector: "kbq-dropdown-item, [kbq-dropdown-item]", inputs: ["disabled", "progress"], exportAs: ["kbqDropdownItem"] }, { kind: "directive", type: i5.KbqDropdownTrigger, selector: "[kbqDropdownTriggerFor]", inputs: ["offsetX", "offsetY", "kbqDropdownTriggerData", "openByArrowDown", "demoteOverlay", "kbqDropdownTriggerRestoreFocus", "kbqDropdownTriggerFor"], outputs: ["dropdownOpened", "dropdownClosed"], exportAs: ["kbqDropdownTrigger"] }, { kind: "ngmodule", type: KbqToolTipModule }, { kind: "directive", type: i6.KbqTooltipTrigger, selector: "[kbqTooltip]", inputs: ["kbqTooltipScrollStrategy", "forDisabledComponent", "ignoreTooltipPointerEvents", "kbqTooltipSingleInstance", "hideWithTimeout", "kbqVisible", "kbqPlacement", "kbqRelativeToPointer", "kbqPlacementPriority", "kbqTooltip", "kbqTooltipDisabled", "kbqEnterDelay", "kbqLeaveDelay", "kbqTrigger", "kbqTooltipClass", "kbqTooltipContext", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipOffset", "kbqTooltipModifier", "kbqTooltipHeader"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }, { kind: "component", type: KbqNotificationItemComponent, selector: "kbq-notification-item", inputs: ["data"] }, { kind: "ngmodule", type: KbqLoaderOverlayModule }, { kind: "component", type: i7.KbqLoaderOverlay, selector: "kbq-loader-overlay", inputs: ["text", "caption", "size", "transparent", "card"] }, { kind: "ngmodule", type: KbqProgressSpinnerModule }, { kind: "component", type: i8.KbqProgressSpinner, selector: "kbq-progress-spinner", inputs: ["id", "value", "mode", "size"] }, { kind: "directive", type: KbqOverflowShadowContainer, selector: "[kbqOverflowShadowContainer]", inputs: ["debounce"], exportAs: ["kbqOverflowShadowContainer"] }, { kind: "directive", type: KbqOverflowShadowTop, selector: "[kbqOverflowShadowTop]", inputs: ["kbqOverflowShadowTop", "shadow"], exportAs: ["kbqOverflowShadowTop"] }, { kind: "directive", type: KbqOverflowShadowBottom, selector: "[kbqOverflowShadowBottom]", inputs: ["kbqOverflowShadowBottom", "shadow"], exportAs: ["kbqOverflowShadowBottom"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [KbqNotificationCenterAnimations.state], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqNotificationCenterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: KbqNotificationCenterComponent, isStandalone: true, selector: "kbq-notification-center", host: { attributes: { "role": "dialog" }, listeners: { "keydown.escape": "escapeHandler($any($event))" }, properties: { "attr.id": "panelId", "attr.aria-labelledby": "titleId", "class.kbq-notification-center_popover": "popoverMode" }, classAttribute: "kbq-notification-center" }, providers: [
+            // The panel traps focus, so it needs a configurable trap even when it is imported standalone —
+            // these used to be reachable only through KbqNotificationCenterModule.
+            { provide: FocusTrapFactory, useClass: ConfigurableFocusTrapFactory },
+            { provide: FOCUS_TRAP_INERT_STRATEGY, useClass: EmptyFocusTrapStrategy },
+            { provide: KBQ_NOTIFICATION_CENTER_PANEL, useExisting: forwardRef((() => KbqNotificationCenterComponent)) }
+        ], viewQueries: [{ propertyName: "switcher", first: true, predicate: ["notificationSwitcher"], descendants: true, isSignal: true }, { propertyName: "scrollContainer", first: true, predicate: KbqScrollbarViewport, descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.KbqLocaleOverridesDirective }], ngImport: i0, template: "<!-- `display: contents` keeps the trap out of the panel's flex layout while still scoping the focus trap\nto everything the panel renders. -->\n<div class=\"kbq-notification-center__trap\" [cdkTrapFocus]=\"isTrapFocus\">\n    <div class=\"kbq-notification-center-header\">\n        <div class=\"kbq-notification-center-title\">\n            <div class=\"kbq-notification-center-title__text\" [id]=\"titleId\">\n                {{ localeConfiguration().notifications }}\n            </div>\n            <button\n                #notificationSwitcher\n                kbq-button\n                class=\"kbq-notification-center-title__button\"\n                data-testid=\"kbq-notification-center-silent-mode-toggle\"\n                [kbqDropdownTriggerFor]=\"notificationSwitcherDropdown\"\n                [attr.aria-label]=\"\n                    service.silentMode()\n                        ? localeConfiguration().doNotDisturb\n                        : localeConfiguration().showPopUpNotifications\n                \"\n                [kbqTooltip]=\"\n                    service.silentMode()\n                        ? localeConfiguration().doNotDisturb\n                        : localeConfiguration().showPopUpNotifications\n                \"\n                [kbqTooltipArrow]=\"false\"\n                [kbqPlacement]=\"'right'\"\n                [kbqTooltipOffset]=\"4\"\n                [kbqStyle]=\"'transparent'\"\n                [color]=\"'contrast'\"\n            >\n                <i kbq-icon=\"{{ service.silentMode() ? 'kbq-bell-slash_16' : 'kbq-bell_16' }}\"></i>\n            </button>\n        </div>\n        <div class=\"kbq-notification-center-toolbar\">\n            @if (!service.empty()) {\n                <button\n                    kbq-button\n                    class=\"kbq-notification-center-toolbar__button\"\n                    data-testid=\"kbq-notification-center-remove-all-button\"\n                    [attr.aria-label]=\"a11yLocaleConfiguration().removeAll\"\n                    [kbqStyle]=\"'transparent'\"\n                    [color]=\"'contrast'\"\n                    [kbqTooltip]=\"localeConfiguration().removeAll\"\n                    [kbqPlacement]=\"'bottom'\"\n                    [kbqTooltipArrow]=\"false\"\n                    (click)=\"removeAll()\"\n                >\n                    <i kbq-icon=\"kbq-trash_16\"></i>\n                </button>\n\n                <kbq-divider [vertical]=\"true\" />\n            }\n\n            <button\n                kbq-button\n                class=\"kbq-notification-center-toolbar__button\"\n                data-testid=\"kbq-notification-center-close-button\"\n                [attr.aria-label]=\"a11yLocaleConfiguration().close\"\n                [kbqStyle]=\"'transparent'\"\n                [color]=\"'contrast'\"\n                (click)=\"hide(0)\"\n            >\n                <i kbq-icon=\"kbq-xmark_16\"></i>\n            </button>\n        </div>\n    </div>\n\n    <!-- One persistent live region for the whole panel: a region inserted together with its text is\n    not reliably announced, so only the text below ever changes. -->\n    <div class=\"cdk-visually-hidden\" data-testid=\"kbq-notification-center-status\" role=\"status\" aria-live=\"polite\">\n        {{ statusMessage }}\n    </div>\n\n    <div\n        #notificationCenterContainer=\"kbqOverflowShadowContainer\"\n        kbqScrollbarViewport\n        kbqOverflowShadowContainer\n        class=\"kbq-notification-center-container\"\n        data-testid=\"kbq-notification-center-container\"\n        [class.kbq-animations-disabled]=\"animationsDisabled\"\n        [kbqOverflowShadowBottom]=\"notificationCenterContainer\"\n        [shadow]=\"'var(--kbq-shadow-overflow-normal-bottom)'\"\n    >\n        @if (!service.errorMode()) {\n            @if (!service.loadingMode()) {\n                @for (group of service.groupedItems(); track group.id) {\n                    <div\n                        class=\"kbq-notification-center-sub-header\"\n                        data-testid=\"kbq-notification-center-group\"\n                        [kbqOverflowShadowTop]=\"$first ? notificationCenterContainer : undefined\"\n                    >\n                        <div class=\"kbq-notification-center-sub-header__date\">{{ group.title }}</div>\n\n                        <button\n                            kbq-button\n                            class=\"kbq-notification-center-sub-header__button\"\n                            data-testid=\"kbq-notification-center-remove-group-button\"\n                            [attr.aria-label]=\"localeConfiguration().remove\"\n                            [kbqStyle]=\"'transparent'\"\n                            [color]=\"'contrast'\"\n                            [kbqTooltip]=\"localeConfiguration().remove\"\n                            [kbqPlacement]=\"'right'\"\n                            [kbqTooltipArrow]=\"false\"\n                            (click)=\"removeGroup(group)\"\n                        >\n                            <i kbq-icon=\"kbq-trash_16\"></i>\n                        </button>\n                    </div>\n\n                    @for (item of group.items; track item.id) {\n                        <kbq-notification-item [data]=\"item\" />\n                    }\n                } @empty {\n                    @if (!service.loadingMore() && !service.loadMoreErrorMode()) {\n                        <div\n                            class=\"kbq-notification-center-empty-container\"\n                            data-testid=\"kbq-notification-center-empty\"\n                        >\n                            <i kbq-icon-item=\"kbq-bell_16\" [big]=\"true\" [color]=\"'contrast-fade'\"></i>\n                            {{ localeConfiguration().noNotifications }}\n                        </div>\n                    }\n                }\n\n                @if (service.loadingMore()) {\n                    <div class=\"kbq-notification-center-load-more\" data-testid=\"kbq-notification-center-load-more\">\n                        <kbq-progress-spinner [mode]=\"'indeterminate'\" [size]=\"'compact'\" />\n                    </div>\n                } @else if (service.loadMoreErrorMode()) {\n                    <div\n                        class=\"kbq-notification-center-load-more-error\"\n                        data-testid=\"kbq-notification-center-load-more-error\"\n                    >\n                        {{ localeConfiguration().failedToLoadNotifications }}\n                        <button\n                            kbq-button\n                            data-testid=\"kbq-notification-center-load-more-retry-button\"\n                            [kbqStyle]=\"'transparent'\"\n                            [color]=\"'theme'\"\n                            (click)=\"retryLoadMore()\"\n                        >\n                            {{ localeConfiguration().repeat }}\n                        </button>\n                    </div>\n                }\n            } @else {\n                <kbq-loader-overlay data-testid=\"kbq-notification-center-loader\" />\n            }\n        } @else {\n            <div class=\"kbq-notification-center-error-container\" data-testid=\"kbq-notification-center-error\">\n                <i kbq-icon-item=\"kbq-bell_16\" [big]=\"true\" [color]=\"'error'\" [fade]=\"true\"></i>\n                {{ localeConfiguration().failedToLoadNotifications }}\n                <button\n                    kbq-button\n                    data-testid=\"kbq-notification-center-reload-button\"\n                    [kbqStyle]=\"'transparent'\"\n                    [color]=\"'theme'\"\n                    (click)=\"service.onReload.next()\"\n                >\n                    {{ localeConfiguration().repeat }}\n                </button>\n            </div>\n        }\n    </div>\n\n    <!-- `class` is KbqDropdown's own input: it moves the class onto the panel rendered in the overlay,\n    which is where the check-mark width token has to be declared to reach the marks. -->\n    <kbq-dropdown #notificationSwitcherDropdown=\"kbqDropdown\" class=\"kbq-notification-center-switcher\">\n        <button\n            kbq-dropdown-item\n            data-testid=\"kbq-notification-center-show-notifications-button\"\n            (click)=\"service.setSilentMode(false)\"\n        >\n            <i\n                class=\"kbq-notification-center-switcher__mark\"\n                kbq-icon=\"kbq-circle-xs_16\"\n                [class.kbq-notification-center-switcher__mark_hidden]=\"service.silentMode()\"\n            ></i>\n            {{ localeConfiguration().showPopUpNotifications }}\n        </button>\n        <button\n            kbq-dropdown-item\n            data-testid=\"kbq-notification-center-do-not-disturb-button\"\n            (click)=\"service.setSilentMode(true)\"\n        >\n            <i\n                class=\"kbq-notification-center-switcher__mark\"\n                kbq-icon=\"kbq-circle-xs_16\"\n                [class.kbq-notification-center-switcher__mark_hidden]=\"!service.silentMode()\"\n            ></i>\n            {{ localeConfiguration().doNotDisturb }}\n        </button>\n    </kbq-dropdown>\n</div>\n", styles: [".kbq-notification-center{position:relative;display:flex;flex-direction:column;width:var(--kbq-notification-center-size-container-width);height:var(--kbq-notification-center-popover-height, 100vh);box-sizing:border-box;z-index:1}.kbq-notification-center:not(.kbq-notification-center_popover){border-right:1px solid;border-left:1px solid}.kbq-notification-center.kbq-notification-center_popover{margin-top:var(--kbq-size-xxs);margin-bottom:var(--kbq-size-xxs);border-radius:var(--kbq-notification-center-size-container-border-radius)}@supports (corner-shape: squircle){.kbq-notification-center.kbq-notification-center_popover{corner-shape:squircle;border-radius:clamp(var(--kbq-notification-center-size-container-border-radius) * 1.85,var(--kbq-notification-center-size-container-border-radius) * 2.3 - 3.6px,var(--kbq-notification-center-size-container-border-radius) * 2)}}.kbq-notification-center.kbq-notification-center_popover{height:var(--kbq-notification-center-popover-height, calc(100vh - var(--kbq-notification-center-size-navbar-height)));box-shadow:var(--kbq-notification-center-container-shadow)}.kbq-notification-center__trap{display:contents}.kbq-notification-center-header{display:flex;flex-direction:row;justify-content:space-between;padding:var(--kbq-size-m) var(--kbq-size-xl) var(--kbq-size-xxs) var(--kbq-size-xxl)}.kbq-notification-center-title{display:flex;flex-direction:row;align-items:center;gap:var(--kbq-size-xxs)}.kbq-notification-center-toolbar{display:flex;flex-direction:row;align-items:center}.kbq-notification-center-toolbar .kbq-divider.kbq-divider_vertical{height:var(--kbq-size-m)}.kbq-notification-center-switcher__mark{min-width:var(--kbq-notification-center-size-switcher-mark-width)}.kbq-notification-center-switcher__mark.kbq-notification-center-switcher__mark_hidden{visibility:hidden}.kbq-notification-center-sub-header{position:sticky;top:0;z-index:var(--kbq-notification-center-sub-header-z-index);display:flex;flex-direction:row;padding:var(--kbq-size-s) var(--kbq-size-xl)}.kbq-notification-center-sub-header .kbq-notification-center-sub-header__button{position:absolute;top:0;right:var(--kbq-size-xl);display:flex;opacity:0;pointer-events:none}.kbq-notification-center-sub-header:hover .kbq-notification-center-sub-header__button,.kbq-notification-center-sub-header:focus-within .kbq-notification-center-sub-header__button{opacity:1;pointer-events:auto}.kbq-notification-center-container{--kbq-scrollbar-track-z-index: calc(var(--kbq-notification-center-sub-header-z-index) + 1);height:100%;overflow:auto;border-radius:inherit;corner-shape:inherit;padding-bottom:var(--kbq-size-xl);scroll-padding-top:var(--kbq-notification-center-size-sub-header-height);scroll-behavior:smooth}.kbq-notification-center-container.kbq-animations-disabled{scroll-behavior:auto}@media(prefers-reduced-motion:reduce){.kbq-notification-center-container{scroll-behavior:auto}}.kbq-notification-center-container .kbq-loader-overlay_parent{border-radius:inherit;corner-shape:inherit}.kbq-notification-center-load-more{display:flex;align-items:center;justify-content:center;padding:var(--kbq-notification-center-size-load-more-padding-vertical) 0}.kbq-notification-center-load-more-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--kbq-size-xxs) var(--kbq-size-xxl);text-align:center}.kbq-notification-center-load-more-error .kbq-button{margin-top:var(--kbq-size-s)}.kbq-notification-center-empty-container,.kbq-notification-center-error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}.kbq-notification-center-empty-container .kbq-icon,.kbq-notification-center-error-container .kbq-icon{margin-bottom:var(--kbq-size-xl)}.kbq-notification-center-empty-container .kbq-button,.kbq-notification-center-error-container .kbq-button{margin-top:var(--kbq-size-s)}.kbq-notification-center{background:var(--kbq-notification-center-container-background)}.kbq-notification-center:not(.kbq-notification-center_popover){border-right-color:var(--kbq-notification-center-container-border-color);border-left-color:var(--kbq-notification-center-container-border-color)}.kbq-notification-center-sub-header{background:var(--kbq-notification-center-container-background)}.kbq-notification-center-error-container,.kbq-notification-center-load-more-error{color:var(--kbq-notification-center-error-text-color)}.kbq-notification-center{font-size:var(--kbq-typography-text-normal-medium-font-size);font-style:var(--kbq-typography-text-normal-medium-font-style);font-weight:var(--kbq-typography-text-normal-medium-font-weight);line-height:var(--kbq-typography-text-normal-medium-line-height);font-family:var(--kbq-typography-text-normal-medium-font-family);text-transform:var(--kbq-typography-text-normal-medium-text-transform);font-feature-settings:var(--kbq-typography-text-normal-medium-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-medium-letter-spacing)}.kbq-notification-center-title__text{font-size:var(--kbq-typography-text-big-strong-font-size);font-style:var(--kbq-typography-text-big-strong-font-style);font-weight:var(--kbq-typography-text-big-strong-font-weight);line-height:var(--kbq-typography-text-big-strong-line-height);font-family:var(--kbq-typography-text-big-strong-font-family);text-transform:var(--kbq-typography-text-big-strong-text-transform);font-feature-settings:var(--kbq-typography-text-big-strong-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-strong-letter-spacing)}\n", ".kbq-notification-center{--kbq-notification-center-size-container-width: 400px;--kbq-notification-center-size-navbar-height: var(--kbq-size-5xl);--kbq-notification-center-size-container-border-radius: var(--kbq-size-xs);--kbq-notification-center-sub-header-z-index: 2;--kbq-notification-center-size-sub-header-height: calc(var(--kbq-size-s) * 2 + var(--kbq-size-xl));--kbq-notification-center-size-item-icon-padding-top: calc(var(--kbq-size-m) + var(--kbq-size-3xs));--kbq-notification-center-size-item-time-padding-left: calc(var(--kbq-size-xl) + var(--kbq-size-3xs));--kbq-notification-center-size-load-more-padding-vertical: calc(var(--kbq-size-xxl) + var(--kbq-size-3xs));--kbq-notification-center-container-background: var(--kbq-background-card);--kbq-notification-center-container-border-color: var(--kbq-line-contrast-less);--kbq-notification-center-container-shadow: var(--kbq-shadow-popup);--kbq-notification-center-error-text-color: var(--kbq-foreground-error)}.kbq-notification-center-switcher{--kbq-notification-center-size-switcher-mark-width: var(--kbq-size-l)}\n"], dependencies: [{ kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2.KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }, { kind: "component", type: i2.KbqIconItem, selector: "[kbq-icon-item]", inputs: ["kbq-icon-item", "fade", "big"] }, { kind: "ngmodule", type: KbqBadgeModule }, { kind: "directive", type: KbqScrollbarViewport, selector: "[kbqScrollbarViewport]", inputs: ["kbqScrollbarMode", "kbqScrollbarHideDelay"] }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i3$1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i3$1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "directive", type: i3$1.KbqButtonDropdownTrigger, selector: "[kbq-button][kbqDropdownTriggerFor]" }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "component", type: i4.KbqDivider, selector: "kbq-divider", inputs: ["vertical", "paddings", "decorative", "length"] }, { kind: "ngmodule", type: KbqDropdownModule }, { kind: "component", type: i5.KbqDropdown, selector: "kbq-dropdown", inputs: ["activeDescendantNavigation", "navigationWithWrap", "xPosition", "yPosition", "overlapTriggerY", "overlapTriggerX", "hasBackdrop", "class", "backdropClass", "panelWidth", "panelMinWidth", "panelMaxWidth", "safeArea"], outputs: ["xPositionChange", "yPositionChange", "overlapTriggerYChange", "overlapTriggerXChange", "closed"], exportAs: ["kbqDropdown"] }, { kind: "component", type: i5.KbqDropdownItem, selector: "kbq-dropdown-item, [kbq-dropdown-item]", inputs: ["disabled", "progress"], exportAs: ["kbqDropdownItem"] }, { kind: "directive", type: i5.KbqDropdownTrigger, selector: "[kbqDropdownTriggerFor]", inputs: ["offsetX", "offsetY", "kbqDropdownTriggerData", "openByArrowDown", "kbqDropdownTriggerOrigin", "kbqDropdownTriggerAutoFocus", "kbqDropdownTriggerRestoreFocus", "kbqDropdownTriggerFor"], outputs: ["offsetXChange", "openByArrowDownChange", "kbqDropdownTriggerRestoreFocusChange", "dropdownOpened", "dropdownClosed"], exportAs: ["kbqDropdownTrigger"] }, { kind: "ngmodule", type: KbqToolTipModule }, { kind: "directive", type: i6.KbqTooltipTrigger, selector: "[kbqTooltip]", inputs: ["kbqTooltipScrollStrategy", "forDisabledComponent", "ignoreTooltipPointerEvents", "kbqTooltipSingleInstance", "kbqTrigger", "hideWithTimeout", "kbqEnterDelay", "kbqLeaveDelay", "kbqRelativeToPointer", "kbqRelativeToCaret", "kbqRelativeToCaretVertical", "kbqTooltip", "kbqTooltipHeader", "kbqTooltipModifier", "kbqTooltipContext", "kbqTooltipClass", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipOffset", "kbqTooltipDisabled", "kbqPlacementPriority", "kbqPlacement", "kbqVisible"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: KbqNotificationItemComponent, selector: "kbq-notification-item", inputs: ["data"] }, { kind: "ngmodule", type: KbqLoaderOverlayModule }, { kind: "component", type: i7.KbqLoaderOverlay, selector: "kbq-loader-overlay", inputs: ["text", "caption", "size", "surface", "transparent", "card"] }, { kind: "ngmodule", type: KbqProgressSpinnerModule }, { kind: "component", type: i8.KbqProgressSpinner, selector: "kbq-progress-spinner", inputs: ["id", "value", "mode", "size"] }, { kind: "directive", type: KbqOverflowShadowContainer, selector: "[kbqOverflowShadowContainer]", inputs: ["debounce"], exportAs: ["kbqOverflowShadowContainer"] }, { kind: "directive", type: KbqOverflowShadowTop, selector: "[kbqOverflowShadowTop]", inputs: ["kbqOverflowShadowTop", "shadow"], exportAs: ["kbqOverflowShadowTop"] }, { kind: "directive", type: KbqOverflowShadowBottom, selector: "[kbqOverflowShadowBottom]", inputs: ["kbqOverflowShadowBottom", "shadow"], exportAs: ["kbqOverflowShadowBottom"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNotificationCenterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqNotificationCenterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-notification-center', imports: [
                         KbqIconModule,
                         KbqBadgeModule,
-                        KbqScrollbarModule,
+                        KbqScrollbarViewport,
                         KbqButtonModule,
                         KbqDividerModule,
                         KbqDropdownModule,
                         KbqToolTipModule,
-                        AsyncPipe,
+                        CdkTrapFocus,
                         KbqNotificationItemComponent,
                         KbqLoaderOverlayModule,
                         KbqProgressSpinnerModule,
                         KbqOverflowShadowContainer,
                         KbqOverflowShadowTop,
                         KbqOverflowShadowBottom
+                    ], providers: [
+                        // The panel traps focus, so it needs a configurable trap even when it is imported standalone —
+                        // these used to be reachable only through KbqNotificationCenterModule.
+                        { provide: FocusTrapFactory, useClass: ConfigurableFocusTrapFactory },
+                        { provide: FOCUS_TRAP_INERT_STRATEGY, useClass: EmptyFocusTrapStrategy },
+                        { provide: KBQ_NOTIFICATION_CENTER_PANEL, useExisting: forwardRef((() => KbqNotificationCenterComponent)) }
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-notification-center',
+                        role: 'dialog',
+                        '[attr.id]': 'panelId',
+                        '[attr.aria-labelledby]': 'titleId',
                         '[class.kbq-notification-center_popover]': 'popoverMode',
-                        '(keydown.escape)': 'escapeHandler()'
-                    }, animations: [KbqNotificationCenterAnimations.state], preserveWhitespaces: false, template: "<div class=\"kbq-notification-center-header\">\n    <div class=\"kbq-notification-center-title\">\n        <div class=\"kbq-notification-center-title__text\">{{ localeData.notifications }}</div>\n        <button\n            #notificationSwitcher\n            kbq-button\n            class=\"kbq-notification-center-title__button\"\n            data-testid=\"kbq-notification-center-silent-mode-toggle\"\n            [kbqDropdownTriggerFor]=\"notificationSwitcherDropdown\"\n            [kbqTooltip]=\"service.silentMode.value ? localeData.doNotDisturb : localeData.showPopUpNotifications\"\n            [kbqTooltipArrow]=\"false\"\n            [kbqPlacement]=\"'right'\"\n            [kbqTooltipOffset]=\"4\"\n            [kbqStyle]=\"'transparent'\"\n            [color]=\"'contrast'\"\n        >\n            <i kbq-icon=\"{{ service.silentMode.value ? 'kbq-bell-slash_16' : 'kbq-bell_16' }}\"></i>\n        </button>\n    </div>\n    <div class=\"kbq-notification-center-toolbar\">\n        @if (!service.isEmpty) {\n            <button\n                kbq-button\n                class=\"kbq-notification-center-toolbar__button\"\n                data-testid=\"kbq-notification-center-remove-all-button\"\n                [kbqStyle]=\"'transparent'\"\n                [color]=\"'contrast'\"\n                (click)=\"service.removeAll()\"\n            >\n                <i kbq-icon=\"kbq-trash_16\"></i>\n            </button>\n\n            <kbq-divider [vertical]=\"true\" />\n        }\n\n        <button\n            kbq-button\n            class=\"kbq-notification-center-toolbar__button\"\n            data-testid=\"kbq-notification-center-close-button\"\n            [kbqStyle]=\"'transparent'\"\n            [color]=\"'contrast'\"\n            (click)=\"hide(0)\"\n        >\n            <i kbq-icon=\"kbq-xmark_16\"></i>\n        </button>\n    </div>\n</div>\n\n<div\n    #notificationCenterContainer=\"kbqOverflowShadowContainer\"\n    kbq-scrollbar\n    kbqOverflowShadowContainer\n    class=\"kbq-notification-center-container\"\n    data-testid=\"kbq-notification-center-container\"\n    [kbqOverflowShadowBottom]=\"notificationCenterContainer\"\n    [shadow]=\"'var(--kbq-shadow-overflow-normal-bottom)'\"\n    (onScroll)=\"onContainerScroll()\"\n>\n    @if (!service.errorMode.value) {\n        @if (!service.loadingMode.value) {\n            @for (group of service.groupedItems | async; track group) {\n                <div\n                    class=\"kbq-notification-center-sub-header\"\n                    data-testid=\"kbq-notification-center-group\"\n                    [kbqOverflowShadowTop]=\"$first ? notificationCenterContainer : undefined\"\n                >\n                    <div class=\"kbq-notification-center-sub-header__date\">{{ group.title }}</div>\n\n                    <button\n                        kbq-button\n                        class=\"kbq-notification-center-sub-header__button\"\n                        data-testid=\"kbq-notification-center-remove-group-button\"\n                        [kbqStyle]=\"'transparent'\"\n                        [color]=\"'contrast'\"\n                        [kbqTooltip]=\"localeData.remove\"\n                        [kbqPlacement]=\"'right'\"\n                        [kbqTooltipArrow]=\"false\"\n                        (click)=\"service.removeGroup(group)\"\n                    >\n                        <i kbq-icon=\"kbq-trash_16\"></i>\n                    </button>\n                </div>\n\n                @for (item of group.items; track item) {\n                    <kbq-notification-item [data]=\"item\" />\n                }\n            } @empty {\n                @if (!service.loadingMore.value) {\n                    <div class=\"kbq-notification-center-empty-container\" data-testid=\"kbq-notification-center-empty\">\n                        <i kbq-icon-item=\"kbq-bell_16\" [big]=\"true\" [color]=\"'contrast-fade'\"></i>\n                        {{ localeData.noNotifications }}\n                    </div>\n                }\n            }\n\n            @if (service.loadingMore.value) {\n                <div\n                    class=\"kbq-notification-center-load-more\"\n                    data-testid=\"kbq-notification-center-load-more\"\n                    role=\"status\"\n                    [attr.aria-label]=\"localeData.loadingMore\"\n                >\n                    <kbq-progress-spinner [mode]=\"'indeterminate'\" [size]=\"'compact'\" />\n                </div>\n            }\n\n            @if (service.loadMoreErrorMode.value) {\n                <div\n                    class=\"kbq-notification-center-load-more-error\"\n                    data-testid=\"kbq-notification-center-load-more-error\"\n                    role=\"alert\"\n                >\n                    {{ localeData.failedToLoadNotifications }}\n                    <button\n                        kbq-button\n                        data-testid=\"kbq-notification-center-load-more-retry-button\"\n                        [kbqStyle]=\"'transparent'\"\n                        [color]=\"'theme'\"\n                        (click)=\"retryLoadMore()\"\n                    >\n                        {{ localeData.repeat }}\n                    </button>\n                </div>\n            }\n        } @else {\n            <kbq-loader-overlay data-testid=\"kbq-notification-center-loader\" [transparent]=\"true\" />\n        }\n    } @else {\n        <div class=\"kbq-notification-center-error-container\" data-testid=\"kbq-notification-center-error\">\n            <i kbq-icon-item=\"kbq-bell_16\" [big]=\"true\" [color]=\"'error'\" [fade]=\"true\"></i>\n            {{ localeData.failedToLoadNotifications }}\n            <button\n                kbq-button\n                data-testid=\"kbq-notification-center-reload-button\"\n                [kbqStyle]=\"'transparent'\"\n                [color]=\"'theme'\"\n                (click)=\"service.onReload.emit()\"\n            >\n                {{ localeData.repeat }}\n            </button>\n        </div>\n    }\n</div>\n\n<kbq-dropdown #notificationSwitcherDropdown=\"kbqDropdown\">\n    <button\n        kbq-dropdown-item\n        data-testid=\"kbq-notification-center-show-notifications-button\"\n        (click)=\"service.setSilentMode(false)\"\n    >\n        <i kbq-icon=\"{{ !service.silentMode.value ? 'kbq-circle-xs_16' : '' }}\" [style.min-width.px]=\"16\"></i>\n        {{ localeData.showPopUpNotifications }}\n    </button>\n    <button\n        kbq-dropdown-item\n        data-testid=\"kbq-notification-center-do-not-disturb-button\"\n        (click)=\"service.setSilentMode(true)\"\n    >\n        <i kbq-icon=\"{{ service.silentMode.value ? 'kbq-circle-xs_16' : '' }}\" [style.min-width.px]=\"16\"></i>\n        {{ localeData.doNotDisturb }}\n    </button>\n</kbq-dropdown>\n", styles: [".kbq-notification-center{position:relative;display:flex;flex-direction:column;width:400px;height:100vh;box-sizing:border-box;z-index:1}.kbq-notification-center:not(.kbq-notification-center_popover){border-right:1px solid;border-left:1px solid}.kbq-notification-center.kbq-notification-center_popover{margin-top:var(--kbq-size-xxs);margin-bottom:var(--kbq-size-xxs);border-radius:var(--kbq-size-xs);height:calc(100vh - 48px);box-shadow:var(--kbq-shadow-popup)}.kbq-notification-center-header{display:flex;flex-direction:row;justify-content:space-between;padding:var(--kbq-size-m) var(--kbq-size-xl) var(--kbq-size-xxs) var(--kbq-size-xxl)}.kbq-notification-center-title{display:flex;flex-direction:row;align-items:center;gap:var(--kbq-size-xxs)}.kbq-notification-center-toolbar{display:flex;flex-direction:row;align-items:center}.kbq-notification-center-toolbar .kbq-divider.kbq-divider_vertical{height:var(--kbq-size-m)}.kbq-notification-center-sub-header{position:sticky;top:0;z-index:100;display:flex;flex-direction:row;padding:var(--kbq-size-s) var(--kbq-size-xl)}.kbq-notification-center-sub-header .kbq-notification-center-sub-header__button{position:absolute;top:0;right:var(--kbq-size-xl);display:none}.kbq-notification-center-sub-header:hover .kbq-notification-center-sub-header__button,.kbq-notification-center-sub-header:focus-within .kbq-notification-center-sub-header__button{display:flex}.kbq-notification-center-container{height:100%;border-radius:inherit;padding-bottom:var(--kbq-size-xl)}.kbq-notification-center-container [data-overlayscrollbars-viewport]{scroll-behavior:smooth}@media(prefers-reduced-motion:reduce){.kbq-notification-center-container [data-overlayscrollbars-viewport]{scroll-behavior:auto}}.kbq-notification-center-container .kbq-loader-overlay_parent{border-radius:inherit}.kbq-notification-center-load-more{display:flex;align-items:center;justify-content:center;padding:26px 0}.kbq-notification-center-load-more-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--kbq-size-xxs) var(--kbq-size-xxl);text-align:center}.kbq-notification-center-load-more-error .kbq-button{margin-top:var(--kbq-size-s)}.kbq-notification-center-empty-container,.kbq-notification-center-error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}.kbq-notification-center-empty-container .kbq-icon,.kbq-notification-center-error-container .kbq-icon{margin-bottom:var(--kbq-size-xl)}.kbq-notification-center-empty-container .kbq-button,.kbq-notification-center-error-container .kbq-button{margin-top:var(--kbq-size-s)}.kbq-notification-center,.kbq-notification-center-sub-header{background:var(--kbq-background-card)}.kbq-notification-center:not(.kbq-notification-center_popover),.kbq-notification-center-sub-header:not(.kbq-notification-center_popover){border-right-color:var(--kbq-line-contrast-less);border-left-color:var(--kbq-line-contrast-less)}.kbq-notification-center-error-container,.kbq-notification-center-load-more-error{color:var(--kbq-foreground-error)}.kbq-notification-center{font-size:var(--kbq-typography-text-normal-medium-font-size);font-style:var(--kbq-typography-text-normal-medium-font-style);font-weight:var(--kbq-typography-text-normal-medium-font-weight);line-height:var(--kbq-typography-text-normal-medium-line-height);font-family:var(--kbq-typography-text-normal-medium-font-family);text-transform:var(--kbq-typography-text-normal-medium-text-transform);font-feature-settings:var(--kbq-typography-text-normal-medium-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-medium-letter-spacing)}.kbq-notification-center-title__text{font-size:var(--kbq-typography-text-big-strong-font-size);font-style:var(--kbq-typography-text-big-strong-font-style);font-weight:var(--kbq-typography-text-big-strong-font-weight);line-height:var(--kbq-typography-text-big-strong-line-height);font-family:var(--kbq-typography-text-big-strong-font-family);text-transform:var(--kbq-typography-text-big-strong-text-transform);font-feature-settings:var(--kbq-typography-text-big-strong-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-strong-letter-spacing)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { switcher: [{ type: i0.ViewChild, args: ['notificationSwitcher', { isSignal: true }] }], scrollContainer: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqScrollbar), { isSignal: true }] }] } });
+                        '(keydown.escape)': 'escapeHandler($any($event))'
+                    }, hostDirectives: [KbqLocaleOverridesDirective], preserveWhitespaces: false, template: "<!-- `display: contents` keeps the trap out of the panel's flex layout while still scoping the focus trap\nto everything the panel renders. -->\n<div class=\"kbq-notification-center__trap\" [cdkTrapFocus]=\"isTrapFocus\">\n    <div class=\"kbq-notification-center-header\">\n        <div class=\"kbq-notification-center-title\">\n            <div class=\"kbq-notification-center-title__text\" [id]=\"titleId\">\n                {{ localeConfiguration().notifications }}\n            </div>\n            <button\n                #notificationSwitcher\n                kbq-button\n                class=\"kbq-notification-center-title__button\"\n                data-testid=\"kbq-notification-center-silent-mode-toggle\"\n                [kbqDropdownTriggerFor]=\"notificationSwitcherDropdown\"\n                [attr.aria-label]=\"\n                    service.silentMode()\n                        ? localeConfiguration().doNotDisturb\n                        : localeConfiguration().showPopUpNotifications\n                \"\n                [kbqTooltip]=\"\n                    service.silentMode()\n                        ? localeConfiguration().doNotDisturb\n                        : localeConfiguration().showPopUpNotifications\n                \"\n                [kbqTooltipArrow]=\"false\"\n                [kbqPlacement]=\"'right'\"\n                [kbqTooltipOffset]=\"4\"\n                [kbqStyle]=\"'transparent'\"\n                [color]=\"'contrast'\"\n            >\n                <i kbq-icon=\"{{ service.silentMode() ? 'kbq-bell-slash_16' : 'kbq-bell_16' }}\"></i>\n            </button>\n        </div>\n        <div class=\"kbq-notification-center-toolbar\">\n            @if (!service.empty()) {\n                <button\n                    kbq-button\n                    class=\"kbq-notification-center-toolbar__button\"\n                    data-testid=\"kbq-notification-center-remove-all-button\"\n                    [attr.aria-label]=\"a11yLocaleConfiguration().removeAll\"\n                    [kbqStyle]=\"'transparent'\"\n                    [color]=\"'contrast'\"\n                    [kbqTooltip]=\"localeConfiguration().removeAll\"\n                    [kbqPlacement]=\"'bottom'\"\n                    [kbqTooltipArrow]=\"false\"\n                    (click)=\"removeAll()\"\n                >\n                    <i kbq-icon=\"kbq-trash_16\"></i>\n                </button>\n\n                <kbq-divider [vertical]=\"true\" />\n            }\n\n            <button\n                kbq-button\n                class=\"kbq-notification-center-toolbar__button\"\n                data-testid=\"kbq-notification-center-close-button\"\n                [attr.aria-label]=\"a11yLocaleConfiguration().close\"\n                [kbqStyle]=\"'transparent'\"\n                [color]=\"'contrast'\"\n                (click)=\"hide(0)\"\n            >\n                <i kbq-icon=\"kbq-xmark_16\"></i>\n            </button>\n        </div>\n    </div>\n\n    <!-- One persistent live region for the whole panel: a region inserted together with its text is\n    not reliably announced, so only the text below ever changes. -->\n    <div class=\"cdk-visually-hidden\" data-testid=\"kbq-notification-center-status\" role=\"status\" aria-live=\"polite\">\n        {{ statusMessage }}\n    </div>\n\n    <div\n        #notificationCenterContainer=\"kbqOverflowShadowContainer\"\n        kbqScrollbarViewport\n        kbqOverflowShadowContainer\n        class=\"kbq-notification-center-container\"\n        data-testid=\"kbq-notification-center-container\"\n        [class.kbq-animations-disabled]=\"animationsDisabled\"\n        [kbqOverflowShadowBottom]=\"notificationCenterContainer\"\n        [shadow]=\"'var(--kbq-shadow-overflow-normal-bottom)'\"\n    >\n        @if (!service.errorMode()) {\n            @if (!service.loadingMode()) {\n                @for (group of service.groupedItems(); track group.id) {\n                    <div\n                        class=\"kbq-notification-center-sub-header\"\n                        data-testid=\"kbq-notification-center-group\"\n                        [kbqOverflowShadowTop]=\"$first ? notificationCenterContainer : undefined\"\n                    >\n                        <div class=\"kbq-notification-center-sub-header__date\">{{ group.title }}</div>\n\n                        <button\n                            kbq-button\n                            class=\"kbq-notification-center-sub-header__button\"\n                            data-testid=\"kbq-notification-center-remove-group-button\"\n                            [attr.aria-label]=\"localeConfiguration().remove\"\n                            [kbqStyle]=\"'transparent'\"\n                            [color]=\"'contrast'\"\n                            [kbqTooltip]=\"localeConfiguration().remove\"\n                            [kbqPlacement]=\"'right'\"\n                            [kbqTooltipArrow]=\"false\"\n                            (click)=\"removeGroup(group)\"\n                        >\n                            <i kbq-icon=\"kbq-trash_16\"></i>\n                        </button>\n                    </div>\n\n                    @for (item of group.items; track item.id) {\n                        <kbq-notification-item [data]=\"item\" />\n                    }\n                } @empty {\n                    @if (!service.loadingMore() && !service.loadMoreErrorMode()) {\n                        <div\n                            class=\"kbq-notification-center-empty-container\"\n                            data-testid=\"kbq-notification-center-empty\"\n                        >\n                            <i kbq-icon-item=\"kbq-bell_16\" [big]=\"true\" [color]=\"'contrast-fade'\"></i>\n                            {{ localeConfiguration().noNotifications }}\n                        </div>\n                    }\n                }\n\n                @if (service.loadingMore()) {\n                    <div class=\"kbq-notification-center-load-more\" data-testid=\"kbq-notification-center-load-more\">\n                        <kbq-progress-spinner [mode]=\"'indeterminate'\" [size]=\"'compact'\" />\n                    </div>\n                } @else if (service.loadMoreErrorMode()) {\n                    <div\n                        class=\"kbq-notification-center-load-more-error\"\n                        data-testid=\"kbq-notification-center-load-more-error\"\n                    >\n                        {{ localeConfiguration().failedToLoadNotifications }}\n                        <button\n                            kbq-button\n                            data-testid=\"kbq-notification-center-load-more-retry-button\"\n                            [kbqStyle]=\"'transparent'\"\n                            [color]=\"'theme'\"\n                            (click)=\"retryLoadMore()\"\n                        >\n                            {{ localeConfiguration().repeat }}\n                        </button>\n                    </div>\n                }\n            } @else {\n                <kbq-loader-overlay data-testid=\"kbq-notification-center-loader\" />\n            }\n        } @else {\n            <div class=\"kbq-notification-center-error-container\" data-testid=\"kbq-notification-center-error\">\n                <i kbq-icon-item=\"kbq-bell_16\" [big]=\"true\" [color]=\"'error'\" [fade]=\"true\"></i>\n                {{ localeConfiguration().failedToLoadNotifications }}\n                <button\n                    kbq-button\n                    data-testid=\"kbq-notification-center-reload-button\"\n                    [kbqStyle]=\"'transparent'\"\n                    [color]=\"'theme'\"\n                    (click)=\"service.onReload.next()\"\n                >\n                    {{ localeConfiguration().repeat }}\n                </button>\n            </div>\n        }\n    </div>\n\n    <!-- `class` is KbqDropdown's own input: it moves the class onto the panel rendered in the overlay,\n    which is where the check-mark width token has to be declared to reach the marks. -->\n    <kbq-dropdown #notificationSwitcherDropdown=\"kbqDropdown\" class=\"kbq-notification-center-switcher\">\n        <button\n            kbq-dropdown-item\n            data-testid=\"kbq-notification-center-show-notifications-button\"\n            (click)=\"service.setSilentMode(false)\"\n        >\n            <i\n                class=\"kbq-notification-center-switcher__mark\"\n                kbq-icon=\"kbq-circle-xs_16\"\n                [class.kbq-notification-center-switcher__mark_hidden]=\"service.silentMode()\"\n            ></i>\n            {{ localeConfiguration().showPopUpNotifications }}\n        </button>\n        <button\n            kbq-dropdown-item\n            data-testid=\"kbq-notification-center-do-not-disturb-button\"\n            (click)=\"service.setSilentMode(true)\"\n        >\n            <i\n                class=\"kbq-notification-center-switcher__mark\"\n                kbq-icon=\"kbq-circle-xs_16\"\n                [class.kbq-notification-center-switcher__mark_hidden]=\"!service.silentMode()\"\n            ></i>\n            {{ localeConfiguration().doNotDisturb }}\n        </button>\n    </kbq-dropdown>\n</div>\n", styles: [".kbq-notification-center{position:relative;display:flex;flex-direction:column;width:var(--kbq-notification-center-size-container-width);height:var(--kbq-notification-center-popover-height, 100vh);box-sizing:border-box;z-index:1}.kbq-notification-center:not(.kbq-notification-center_popover){border-right:1px solid;border-left:1px solid}.kbq-notification-center.kbq-notification-center_popover{margin-top:var(--kbq-size-xxs);margin-bottom:var(--kbq-size-xxs);border-radius:var(--kbq-notification-center-size-container-border-radius)}@supports (corner-shape: squircle){.kbq-notification-center.kbq-notification-center_popover{corner-shape:squircle;border-radius:clamp(var(--kbq-notification-center-size-container-border-radius) * 1.85,var(--kbq-notification-center-size-container-border-radius) * 2.3 - 3.6px,var(--kbq-notification-center-size-container-border-radius) * 2)}}.kbq-notification-center.kbq-notification-center_popover{height:var(--kbq-notification-center-popover-height, calc(100vh - var(--kbq-notification-center-size-navbar-height)));box-shadow:var(--kbq-notification-center-container-shadow)}.kbq-notification-center__trap{display:contents}.kbq-notification-center-header{display:flex;flex-direction:row;justify-content:space-between;padding:var(--kbq-size-m) var(--kbq-size-xl) var(--kbq-size-xxs) var(--kbq-size-xxl)}.kbq-notification-center-title{display:flex;flex-direction:row;align-items:center;gap:var(--kbq-size-xxs)}.kbq-notification-center-toolbar{display:flex;flex-direction:row;align-items:center}.kbq-notification-center-toolbar .kbq-divider.kbq-divider_vertical{height:var(--kbq-size-m)}.kbq-notification-center-switcher__mark{min-width:var(--kbq-notification-center-size-switcher-mark-width)}.kbq-notification-center-switcher__mark.kbq-notification-center-switcher__mark_hidden{visibility:hidden}.kbq-notification-center-sub-header{position:sticky;top:0;z-index:var(--kbq-notification-center-sub-header-z-index);display:flex;flex-direction:row;padding:var(--kbq-size-s) var(--kbq-size-xl)}.kbq-notification-center-sub-header .kbq-notification-center-sub-header__button{position:absolute;top:0;right:var(--kbq-size-xl);display:flex;opacity:0;pointer-events:none}.kbq-notification-center-sub-header:hover .kbq-notification-center-sub-header__button,.kbq-notification-center-sub-header:focus-within .kbq-notification-center-sub-header__button{opacity:1;pointer-events:auto}.kbq-notification-center-container{--kbq-scrollbar-track-z-index: calc(var(--kbq-notification-center-sub-header-z-index) + 1);height:100%;overflow:auto;border-radius:inherit;corner-shape:inherit;padding-bottom:var(--kbq-size-xl);scroll-padding-top:var(--kbq-notification-center-size-sub-header-height);scroll-behavior:smooth}.kbq-notification-center-container.kbq-animations-disabled{scroll-behavior:auto}@media(prefers-reduced-motion:reduce){.kbq-notification-center-container{scroll-behavior:auto}}.kbq-notification-center-container .kbq-loader-overlay_parent{border-radius:inherit;corner-shape:inherit}.kbq-notification-center-load-more{display:flex;align-items:center;justify-content:center;padding:var(--kbq-notification-center-size-load-more-padding-vertical) 0}.kbq-notification-center-load-more-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--kbq-size-xxs) var(--kbq-size-xxl);text-align:center}.kbq-notification-center-load-more-error .kbq-button{margin-top:var(--kbq-size-s)}.kbq-notification-center-empty-container,.kbq-notification-center-error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}.kbq-notification-center-empty-container .kbq-icon,.kbq-notification-center-error-container .kbq-icon{margin-bottom:var(--kbq-size-xl)}.kbq-notification-center-empty-container .kbq-button,.kbq-notification-center-error-container .kbq-button{margin-top:var(--kbq-size-s)}.kbq-notification-center{background:var(--kbq-notification-center-container-background)}.kbq-notification-center:not(.kbq-notification-center_popover){border-right-color:var(--kbq-notification-center-container-border-color);border-left-color:var(--kbq-notification-center-container-border-color)}.kbq-notification-center-sub-header{background:var(--kbq-notification-center-container-background)}.kbq-notification-center-error-container,.kbq-notification-center-load-more-error{color:var(--kbq-notification-center-error-text-color)}.kbq-notification-center{font-size:var(--kbq-typography-text-normal-medium-font-size);font-style:var(--kbq-typography-text-normal-medium-font-style);font-weight:var(--kbq-typography-text-normal-medium-font-weight);line-height:var(--kbq-typography-text-normal-medium-line-height);font-family:var(--kbq-typography-text-normal-medium-font-family);text-transform:var(--kbq-typography-text-normal-medium-text-transform);font-feature-settings:var(--kbq-typography-text-normal-medium-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-medium-letter-spacing)}.kbq-notification-center-title__text{font-size:var(--kbq-typography-text-big-strong-font-size);font-style:var(--kbq-typography-text-big-strong-font-style);font-weight:var(--kbq-typography-text-big-strong-font-weight);line-height:var(--kbq-typography-text-big-strong-line-height);font-family:var(--kbq-typography-text-big-strong-font-family);text-transform:var(--kbq-typography-text-big-strong-text-transform);font-feature-settings:var(--kbq-typography-text-big-strong-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-strong-letter-spacing)}\n", ".kbq-notification-center{--kbq-notification-center-size-container-width: 400px;--kbq-notification-center-size-navbar-height: var(--kbq-size-5xl);--kbq-notification-center-size-container-border-radius: var(--kbq-size-xs);--kbq-notification-center-sub-header-z-index: 2;--kbq-notification-center-size-sub-header-height: calc(var(--kbq-size-s) * 2 + var(--kbq-size-xl));--kbq-notification-center-size-item-icon-padding-top: calc(var(--kbq-size-m) + var(--kbq-size-3xs));--kbq-notification-center-size-item-time-padding-left: calc(var(--kbq-size-xl) + var(--kbq-size-3xs));--kbq-notification-center-size-load-more-padding-vertical: calc(var(--kbq-size-xxl) + var(--kbq-size-3xs));--kbq-notification-center-container-background: var(--kbq-background-card);--kbq-notification-center-container-border-color: var(--kbq-line-contrast-less);--kbq-notification-center-container-shadow: var(--kbq-shadow-popup);--kbq-notification-center-error-text-color: var(--kbq-foreground-error)}.kbq-notification-center-switcher{--kbq-notification-center-size-switcher-mark-width: var(--kbq-size-l)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { switcher: [{ type: i0.ViewChild, args: ['notificationSwitcher', { isSignal: true }] }], scrollContainer: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqScrollbarViewport), { isSignal: true }] }] } });
 class KbqNotificationCenterTrigger extends KbqPopUpTrigger {
-    /** Number of unread notifications */
+    /** Number of unread notifications, formatted for the trigger badge. */
     get unreadItemsCounter() {
         return this.service.unreadItemsCounter;
     }
     /** Use popover or not */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
     get popoverMode() {
         return this._popoverMode;
     }
     set popoverMode(value) {
+        if (value === this._popoverMode) {
+            return;
+        }
         this._popoverMode = value;
-        this.placement = PopUpPlacements.Bottom;
-        this.updatePlacementPriority(['bottomCenter', 'bottomLeft', 'bottomRight']);
+        // The placement in force before the mode took over is remembered rather than assumed: a consumer
+        // may have bound one of its own, and turning the mode off used to leave the popover placement
+        // behind for good.
+        if (value) {
+            this.placementBeforePopoverMode = { placement: this.placement, priority: this.placementPriority };
+            this.placement = PopUpPlacements.Bottom;
+            this.updatePlacementPriority(['bottomCenter', 'bottomLeft', 'bottomRight']);
+        }
+        else if (this.placementBeforePopoverMode) {
+            this.placement = this.placementBeforePopoverMode.placement;
+            this.updatePlacementPriority(this.placementBeforePopoverMode.priority);
+            this.placementBeforePopoverMode = null;
+        }
     }
-    /** Set height of popover. Default is calc(100vh - 48px). 48px - height of navbar */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
+    /** Set height of popover. Default is `calc(100vh - <navbar height>)`. */
     get popoverHeight() {
         return this._popoverHeight;
     }
     set popoverHeight(value) {
         this._popoverHeight = value;
-        if (this.instance?.popoverHeight) {
+        // Guarding on the open panel, not on its current height: the previous `instance?.popoverHeight`
+        // check made the first set a no-op and made clearing the height impossible.
+        if (this.instance) {
             this.instance.popoverHeight = value;
         }
     }
     /** Whether the trigger is disabled. */
-    // TODO: Skipped for migration because:
-    //  Accessor inputs cannot be migrated as they are too complex.
     get disabled() {
         return this._disabled;
     }
@@ -544,64 +899,103 @@ class KbqNotificationCenterTrigger extends KbqPopUpTrigger {
     /** @docs-private */
     get overlayConfig() {
         const defaultPanelClass = 'kbq-notification-center__panel';
+        const panelClass = this.panelClass();
         return {
-            panelClass: this.panelClass ? [defaultPanelClass, this.panelClass] : defaultPanelClass,
-            hasBackdrop: this.hasBackdrop,
-            backdropClass: this.backdropClass
+            panelClass: panelClass ? [defaultPanelClass, panelClass] : defaultPanelClass,
+            hasBackdrop: false,
+            backdropClass: this.backdropClass()
         };
     }
+    ngOnChanges(changes) {
+        // A bound input is handed to its member, a bound `undefined` as the member's default; unbound, it leaves
+        // what code wrote.
+        if (changes['placementInput']) {
+            this.placement = this.placementInput() ?? defaultPlacement;
+        }
+        if (changes['popoverModeInput']) {
+            const popoverMode = this.popoverModeInput();
+            if (popoverMode !== undefined)
+                this.popoverMode = popoverMode;
+        }
+        if (changes['popoverHeightInput']) {
+            this.popoverHeight = this.popoverHeightInput() ?? '';
+        }
+        if (changes['stickToWindowInput']) {
+            this.stickToWindow = this.stickToWindowInput();
+        }
+        if (changes['containerInput']) {
+            this.container = this.containerInput();
+        }
+        if (changes['disabledInput']) {
+            const disabled = this.disabledInput();
+            if (disabled !== undefined)
+                this.disabled = disabled;
+        }
+    }
     constructor() {
         super();
         /** @docs-private */
         this.scrollStrategy = inject(KBQ_NOTIFICATION_CENTER_SCROLL_STRATEGY);
         /** @docs-private */
         this.service = inject(KbqNotificationCenterService);
-        // not used
-        /** @docs-private */
+        /**
+         * Id handed to the panel so `aria-controls` can point at it while it is open.
+         *
+         * @docs-private
+         */
+        this.panelId = inject(_IdGenerator).getId('kbq-notification-center-panel-');
+        /**
+         * Not used.
+         *
+         * @docs-private
+         */
         this.arrow = false;
-        /** @docs-private */
-        this.hasBackdrop = false;
-        /** @docs-private */
-        this.size = PopUpSizes.Medium;
         /** Placement of popUp */
-        // TODO: Skipped for migration because:
-        //  Your application code writes to the input. This prevents migration.
-        this.placement = PopUpPlacements.Right;
+        this.placement = defaultPlacement;
         /** Class that will be used in the background */
-        // TODO: Skipped for migration because:
-        //  Class of this input is referenced in the signature of another class.
-        this.backdropClass = 'cdk-overlay-transparent-backdrop';
+        this.backdropClass = input('cdk-overlay-transparent-backdrop', ...(ngDevMode ? [{ debugName: "backdropClass" }] : /* istanbul ignore next */ []));
+        /** Class that will be used in the panel */
+        this.panelClass = input('', { ...(ngDevMode ? { debugName: "panelClass" } : /* istanbul ignore next */ {}), alias: 'kbqNotificationCenterPanelClass' });
         /** Offset of popUp */
-        // TODO: Skipped for migration because:
-        //  Class of this input is referenced in the signature of another class.
-        this.offset = defaultOffsetX;
+        this.offset = input(defaultOffsetX, { ...(ngDevMode ? { debugName: "offset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
         /** Distance in pixels from the bottom of the list at which the next page is requested via `onNextPage`. */
-        this.scrolledToBottomOffset = 0;
+        this.scrolledToBottomOffset = input(0, { ...(ngDevMode ? { debugName: "scrolledToBottomOffset" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+        /** Placement and priority in force before `popoverMode` replaced them. */
+        this.placementBeforePopoverMode = null;
         this._popoverMode = false;
         /** Emits a change event whenever the placement state changes. */
         this.placementChange = new EventEmitter();
+        /** @docs-private */
+        this.placementChangeOutput = outputFromObservable(this.placementChange, { alias: 'kbqPlacementChange' });
         /** Emits a change event whenever the visible state changes. */
         this.visibleChange = new EventEmitter();
         /** @docs-private */
+        this.visibleChangeOutput = outputFromObservable(this.visibleChange, { alias: 'kbqVisibleChange' });
+        /** @docs-private */
         this.trigger = `${PopUpTriggers.Click}, ${PopUpTriggers.Keydown}`;
         /** @docs-private */
         this.originSelector = '.kbq-notification-center';
+        /** @docs-private */
+        this.placementInput = input(undefined, { ...(ngDevMode ? { debugName: "placementInput" } : /* istanbul ignore next */ {}), alias: 'kbqNotificationCenterPlacement' });
+        /** @docs-private */
+        this.popoverModeInput = input(undefined, { ...(ngDevMode ? { debugName: "popoverModeInput" } : /* istanbul ignore next */ {}), alias: 'popoverMode',
+            transform: booleanAttribute });
+        /** @docs-private */
+        this.popoverHeightInput = input(undefined, { ...(ngDevMode ? { debugName: "popoverHeightInput" } : /* istanbul ignore next */ {}), alias: 'popoverHeight' });
+        /** @docs-private */
+        this.stickToWindowInput = input(undefined, { ...(ngDevMode ? { debugName: "stickToWindowInput" } : /* istanbul ignore next */ {}), alias: 'stickToWindow' });
+        /** @docs-private */
+        this.containerInput = input(undefined, { ...(ngDevMode ? { debugName: "containerInput" } : /* istanbul ignore next */ {}), alias: 'container' });
+        /** @docs-private */
+        this.disabledInput = input(undefined, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled',
+            transform: booleanAttribute });
         this.updatePlacementPriority(['right', 'rightBottom', 'rightTop']);
     }
     ngAfterContentInit() {
+        // On close, return focus to the trigger. Suppressing the close on an inner scroll lives in
+        // `closingActions()`, so no per-visibility subscription is needed here.
         this.visibleChange.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((visible) => {
-            if (visible) {
-                // eslint-disable-next-line rxjs-x/no-nested-subscribe
-                this.preventClosingByInnerScrollSubscription = this.closingActions().subscribe((event) => {
-                    if (event && event['scrollDispatcher']) {
-                        this.instance.setStickPosition();
-                        event['kbqPopoverPreventHide'] = true;
-                        event['type'] = 'click';
-                    }
-                });
-            }
-            else {
-                this.preventClosingByInnerScrollSubscription?.unsubscribe();
+            if (!visible) {
                 this.focus();
             }
         });
@@ -610,22 +1004,24 @@ class KbqNotificationCenterTrigger extends KbqPopUpTrigger {
     updateData() {
         if (!this.instance)
             return;
-        this.instance.header = this.header;
+        this.instance.panelId = this.panelId;
         this.instance.content = this.content;
         this.instance.arrow = this.arrow;
-        this.instance.offset = this.offset;
-        this.instance.footer = this.footer;
+        this.instance.offset = this.offset();
         this.instance.popoverMode = this.popoverMode;
         this.instance.popoverHeight = this.popoverHeight;
-        this.instance.scrolledToBottomOffset = this.scrolledToBottomOffset;
+        this.instance.scrolledToBottomOffset = this.scrolledToBottomOffset();
         this.instance.updateTrapFocus(this.trigger !== PopUpTriggers.Focus);
+        this.instance.detectChanges();
         if (this.isOpen) {
             this.updatePosition(true);
         }
     }
-    /** Updates the current position.
+    /**
+     * Updates the current position.
      *
-     * @docs-private */
+     * @docs-private
+     */
     updatePosition(reapplyPosition = false) {
         this.overlayRef = this.createOverlay();
         const position = this.overlayRef.getConfig().positionStrategy
@@ -643,84 +1039,58 @@ class KbqNotificationCenterTrigger extends KbqPopUpTrigger {
     updateClassMap(newPlacement = this.placement) {
         if (!this.instance)
             return;
-        this.instance.updateClassMap(POSITION_TO_CSS_MAP[newPlacement], this.customClass, this.size);
-        this.instance.markForCheck();
+        this.instance.updateClassMap(POSITION_TO_CSS_MAP[newPlacement], this.customClass, PopUpSizes.Medium);
     }
     /** @docs-private */
     closingActions() {
-        return merge(this.overlayRef.outsidePointerEvents(), this.overlayRef.backdropClick(), this.scrollDispatcher.scrolled());
+        return merge(this.overlayRef.outsidePointerEvents(), this.overlayRef.backdropClick(), 
+        // Only a scroll outside the panel should close it. The list viewport is a `CdkScrollable`,
+        // so its own scrolling reaches the root `ScrollDispatcher` too — filtering it out here is
+        // what keeps the panel open, instead of tagging the shared scrollable with a "prevent hide"
+        // flag that would then follow it around the whole application.
+        this.scrollDispatcher.scrolled().pipe(filter((scrollable) => !this.isInnerScroll(scrollable))));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNotificationCenterTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.30", type: KbqNotificationCenterTrigger, isStandalone: true, selector: "[kbqNotificationCenterTrigger]", inputs: { placement: ["kbqNotificationCenterPlacement", "placement"], backdropClass: "backdropClass", panelClass: ["kbqNotificationCenterPanelClass", "panelClass"], offset: ["offset", "offset", numberAttribute], scrolledToBottomOffset: ["scrolledToBottomOffset", "scrolledToBottomOffset", numberAttribute], popoverMode: ["popoverMode", "popoverMode", booleanAttribute], popoverHeight: "popoverHeight", disabled: ["disabled", "disabled", booleanAttribute], stickToWindow: "stickToWindow", container: "container" }, outputs: { placementChange: "kbqPlacementChange", visibleChange: "kbqVisibleChange" }, host: { properties: { "class.kbq-notification-center_open": "isOpen", "class.kbq-active": "hasClickTrigger && isOpen" } }, providers: [kbqSiblingPopupProvider(KbqNotificationCenterTrigger)], exportAs: ["kbqNotificationCenterTrigger"], usesInheritance: true, ngImport: i0 }); }
+    /** Whether a `ScrollDispatcher` emission originates from inside this panel's own scrollable content. */
+    isInnerScroll(scrollable) {
+        return (scrollable instanceof CdkScrollable &&
+            !!scrollable.getElementRef().nativeElement.closest('.kbq-notification-center'));
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqNotificationCenterTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.25", type: KbqNotificationCenterTrigger, isStandalone: true, selector: "[kbqNotificationCenterTrigger]", inputs: { backdropClass: { classPropertyName: "backdropClass", publicName: "backdropClass", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "kbqNotificationCenterPanelClass", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, scrolledToBottomOffset: { classPropertyName: "scrolledToBottomOffset", publicName: "scrolledToBottomOffset", isSignal: true, isRequired: false, transformFunction: null }, placementInput: { classPropertyName: "placementInput", publicName: "kbqNotificationCenterPlacement", isSignal: true, isRequired: false, transformFunction: null }, popoverModeInput: { classPropertyName: "popoverModeInput", publicName: "popoverMode", isSignal: true, isRequired: false, transformFunction: null }, popoverHeightInput: { classPropertyName: "popoverHeightInput", publicName: "popoverHeight", isSignal: true, isRequired: false, transformFunction: null }, stickToWindowInput: { classPropertyName: "stickToWindowInput", publicName: "stickToWindow", isSignal: true, isRequired: false, transformFunction: null }, containerInput: { classPropertyName: "containerInput", publicName: "container", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { placementChangeOutput: "kbqPlacementChange", visibleChangeOutput: "kbqVisibleChange" }, host: { properties: { "class.kbq-notification-center_open": "isOpen", "class.kbq-active": "hasClickTrigger && isOpen", "attr.aria-expanded": "isOpen", "attr.aria-controls": "isOpen ? panelId : null" } }, providers: [kbqSiblingPopupProvider(KbqNotificationCenterTrigger)], exportAs: ["kbqNotificationCenterTrigger"], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNotificationCenterTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqNotificationCenterTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqNotificationCenterTrigger]',
                     providers: [kbqSiblingPopupProvider(KbqNotificationCenterTrigger)],
                     host: {
                         '[class.kbq-notification-center_open]': 'isOpen',
-                        '[class.kbq-active]': 'hasClickTrigger && isOpen'
+                        '[class.kbq-active]': 'hasClickTrigger && isOpen',
+                        '[attr.aria-expanded]': 'isOpen',
+                        '[attr.aria-controls]': 'isOpen ? panelId : null'
                     },
                     exportAs: 'kbqNotificationCenterTrigger'
                 }]
-        }], ctorParameters: () => [], propDecorators: { placement: [{
-                type: Input,
-                args: ['kbqNotificationCenterPlacement']
-            }], backdropClass: [{
-                type: Input
-            }], panelClass: [{
-                type: Input,
-                args: ['kbqNotificationCenterPanelClass']
-            }], offset: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], scrolledToBottomOffset: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
-            }], popoverMode: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], popoverHeight: [{
-                type: Input
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], stickToWindow: [{
-                type: Input
-            }], container: [{
-                type: Input
-            }], placementChange: [{
-                type: Output,
-                args: ['kbqPlacementChange']
-            }], visibleChange: [{
-                type: Output,
-                args: ['kbqVisibleChange']
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { backdropClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropClass", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqNotificationCenterPanelClass", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], scrolledToBottomOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrolledToBottomOffset", required: false }] }], placementChangeOutput: [{ type: i0.Output, args: ["kbqPlacementChange"] }], visibleChangeOutput: [{ type: i0.Output, args: ["kbqVisibleChange"] }], placementInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqNotificationCenterPlacement", required: false }] }], popoverModeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverMode", required: false }] }], popoverHeightInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverHeight", required: false }] }], stickToWindowInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickToWindow", required: false }] }], containerInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "container", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
 
+/**
+ * Compatibility wrapper around the standalone notification center. Importing
+ * `KbqNotificationCenterTrigger` directly is equivalent.
+ */
 class KbqNotificationCenterModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNotificationCenterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqNotificationCenterModule, imports: [KbqNotificationCenterComponent,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqNotificationCenterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: KbqNotificationCenterModule, imports: [KbqNotificationCenterComponent,
             KbqNotificationCenterTrigger], exports: [KbqNotificationCenterComponent,
             KbqNotificationCenterTrigger] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNotificationCenterModule, providers: [
-            { provide: FocusTrapFactory, useClass: ConfigurableFocusTrapFactory },
-            { provide: FOCUS_TRAP_INERT_STRATEGY, useClass: EmptyFocusTrapStrategy },
-            KbqNotificationCenterService
-        ], imports: [KbqNotificationCenterComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqNotificationCenterModule, imports: [KbqNotificationCenterComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNotificationCenterModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqNotificationCenterModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
                         KbqNotificationCenterComponent,
                         KbqNotificationCenterTrigger
                     ],
-                    providers: [
-                        { provide: FocusTrapFactory, useClass: ConfigurableFocusTrapFactory },
-                        { provide: FOCUS_TRAP_INERT_STRATEGY, useClass: EmptyFocusTrapStrategy },
-                        KbqNotificationCenterService
-                    ],
                     exports: [
                         KbqNotificationCenterComponent,
                         KbqNotificationCenterTrigger
@@ -732,5 +1102,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { KBQ_NOTIFICATION_CENTER_CONFIGURATION, KBQ_NOTIFICATION_CENTER_DEFAULT_CONFIGURATION, KBQ_NOTIFICATION_CENTER_SCROLL_STRATEGY, KBQ_NOTIFICATION_CENTER_SCROLL_STRATEGY_FACTORY_PROVIDER, KbqNotificationCenterAnimations, KbqNotificationCenterComponent, KbqNotificationCenterModule, KbqNotificationCenterService, KbqNotificationCenterTrigger, kbqNotificationCenterScrollStrategyFactory, maxUnreadItemsLength };
+export { KBQ_NOTIFICATION_CENTER_CONFIGURATION, KBQ_NOTIFICATION_CENTER_DEFAULT_CONFIGURATION, KBQ_NOTIFICATION_CENTER_DEFAULT_LOCALE_CONFIGURATION, KBQ_NOTIFICATION_CENTER_LOCALE_CONFIGURATION, KBQ_NOTIFICATION_CENTER_PANEL, KBQ_NOTIFICATION_CENTER_SCROLL_STRATEGY, KbqNotificationCenterComponent, KbqNotificationCenterModule, KbqNotificationCenterService, KbqNotificationCenterTrigger, kbqNotificationCenterLocaleConfigurationProvider, kbqNotificationCenterScrollStrategyFactory, maxUnreadItemsLength };
 //# sourceMappingURL=koobiq-components-notification-center.mjs.map