@koobiq/components 19.8.1 → 20.0.0

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

@@ -1,14 +1,14 @@
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { Overlay } from '@angular/cdk/overlay';
-import { NgTemplateOutlet, NgClass, AsyncPipe } from '@angular/common';
+import { NgTemplateOutlet, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, EventEmitter, Injectable, TemplateRef, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, InjectionToken, ChangeDetectorRef, ViewChild, booleanAttribute, numberAttribute, Output, Directive, NgModule } 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 { 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, KbqPopUpTrigger, PopUpTriggers, PopUpSizes, POSITION_TO_CSS_MAP, EmptyFocusTrapStrategy } 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, EmptyFocusTrapStrategy } from '@koobiq/components/core';
 import * as i4 from '@koobiq/components/divider';
 import { KbqDividerModule } from '@koobiq/components/divider';
 import * as i5 from '@koobiq/components/dropdown';
@@ -17,16 +17,14 @@ import * as i1 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 { KbqScrollbarModule, KbqScrollbar } from '@koobiq/components/scrollbar';
+import { KbqScrollbarModule } 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 { combineLatestWith, BehaviorSubject, merge } from 'rxjs';
 import { trigger, state, transition, style, animate } from '@angular/animations';
 import { KbqToastService } from '@koobiq/components/toast';
+import { map, filter } from 'rxjs/operators';
 import * as i3 from '@koobiq/components/title';
 import { KbqTitleModule } from '@koobiq/components/title';
 import { ConfigurableFocusTrapFactory, FocusTrapFactory, FOCUS_TRAP_INERT_STRATEGY } from '@angular/cdk/a11y';
@@ -84,53 +82,25 @@ class KbqNotificationCenterService {
         this.loadingMode = new BehaviorSubject(false);
         /** @docs-private */
         this.errorMode = new BehaviorSubject(false);
-        /**
-         * 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.
-         */
-        this.loadingMore = new BehaviorSubject(false);
-        /**
-         * 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.
-         */
-        this.loadMoreErrorMode = new BehaviorSubject(false);
-        /**
-         * 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.
-         */
-        this.hasMore = new BehaviorSubject(true);
         /** @docs-private */
         this.onRead = new BehaviorSubject(null);
         /** Triggers an event when the user presses the reload button. */
         this.onReload = new EventEmitter();
-        /** Triggers an event when the list is scrolled to the bottom and the next page should be loaded. */
-        this.onNextPage = new EventEmitter();
-        /** Triggers an event when an item, a group, or all notifications are removed. */
-        this.onDelete = new EventEmitter();
         this.originalItems = new BehaviorSubject([]);
-        /**
-         * 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.
-         * @docs-private
-         */
+        /** @docs-private */
         this.groupedItems = this.originalItems.pipe(map((items) => {
             const result = {};
-            items.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]));
+            items.map((item) => this.makeGroup(item, result));
+            return Object.values(result).reverse();
         }));
         /** 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);
+        this.changes = merge(this.silentMode, this.loadingMode, this.errorMode, this.originalItems, this.onRead);
         this.makeGroup = (item, groups) => {
             const parsedDate = this.adapter.parse(item.date, '');
             const groupId = this.adapter.format(parsedDate, 'yyyyMMdd');
             const groupTitle = this.formatter.absoluteLongDate(parsedDate);
             if (groups[groupId]) {
-                groups[groupId].items.push(item);
+                groups[groupId].items.unshift(item);
             }
             else {
                 groups[groupId] = {
@@ -139,15 +109,6 @@ class KbqNotificationCenterService {
                 };
             }
         };
-        /** Compares two notifications by date so the newest comes first. */
-        this.compareByDateDesc = (a, b) => {
-            const parsedA = this.adapter.parse(a.date, '');
-            const parsedB = this.adapter.parse(b.date, '');
-            if (!parsedA || !parsedB) {
-                return 0;
-            }
-            return this.adapter.compareDateTime(parsedB, parsedA);
-        };
         this.toastService?.read.pipe(takeUntilDestroyed()).subscribe((toastData) => {
             const item = this.items.find((item) => item.id === toastData?.id);
             if (item && !item.read) {
@@ -168,52 +129,25 @@ class KbqNotificationCenterService {
     setErrorMode(value) {
         this.errorMode.next(value);
     }
-    /** Set the bottom "load more" spinner visibility. */
-    setLoadingMore(value) {
-        this.loadingMore.next(value);
-    }
-    /** Set the bottom "load more" error state visibility. */
-    setLoadMoreErrorMode(value) {
-        this.loadMoreErrorMode.next(value);
-    }
-    /** Set whether there are more notifications to load via infinite scroll. */
-    setHasMore(value) {
-        this.hasMore.next(value);
-    }
     /** Push new notification item in center */
     push(item) {
         this.setReadState(this.setIds([item]));
         if (!this.silentMode.value) {
-            item.toastId = this.toastService.show(item).id;
+            this.toastService.show(item);
         }
         return this.originalItems.next([...this.originalItems.value, item]);
     }
-    /** Hides the toast that corresponds to the given notification item. */
-    hideToast(item) {
-        if (item.toastId === undefined) {
-            return;
-        }
-        this.toastService.hide(item.toastId);
-        item.toastId = undefined;
-    }
     /** Remove notification item */
     remove(removedItem) {
-        this.hideToast(removedItem);
         this.originalItems.next(this.originalItems.value.filter((item) => removedItem !== item));
-        this.onDelete.emit({ type: 'item', items: [removedItem] });
     }
     /** Remove group of notification items */
     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] });
     }
     /** Remove all notification items */
     removeAll() {
-        const items = this.originalItems.value;
-        items.forEach((item) => this.hideToast(item));
         this.originalItems.next([]);
-        this.onDelete.emit({ type: 'all', items });
     }
     setIds(items) {
         items.forEach((item) => (item.id = item.id ?? new Date().getTime().toString()));
@@ -223,10 +157,10 @@ class KbqNotificationCenterService {
         items.forEach((item) => (item.read = item.read ?? false));
         return items;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqNotificationCenterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqNotificationCenterService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNotificationCenterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNotificationCenterService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqNotificationCenterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNotificationCenterService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -239,6 +173,8 @@ class KbqNotificationItemComponent {
             [`kbq-notification-item_${this.data.style}`]: !!this.data.style
         };
     }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get data() {
         return this._data;
     }
@@ -258,9 +194,6 @@ class KbqNotificationItemComponent {
         this.readStateDirective.read
             .pipe(filter((value) => value), takeUntilDestroyed())
             .subscribe(() => {
-            if (this.data.read) {
-                return;
-            }
             this.data.read = true;
             this.service.onRead.next(this.data);
         });
@@ -268,30 +201,26 @@ class KbqNotificationItemComponent {
     isTemplateRef(value) {
         return value instanceof TemplateRef;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqNotificationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", 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                        [ngClass]=\"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                        [ngClass]=\"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                        [ngClass]=\"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                        [ngClass]=\"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            }\n            @if (!isTemplateRef(data.title)) {\n                <p>{{ data.title }}</p>\n            }\n\n            <div class=\"kbq-notification-item-time\" [class.kbq-notification-item-time_read]=\"data.read\">\n                <div class=\"kbq-notification-item-time__value\">{{ time }}</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            }\n            @if (!isTemplateRef(data.caption)) {\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            }\n            @if (!isTemplateRef(data.content)) {\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            }\n            @if (!isTemplateRef(data.actions)) {\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{visibility:hidden}.kbq-notification-item:hover .kbq-notification-item__remove-button{display:block}.kbq-notification-item__icon-container{flex-shrink:0;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{display:none}.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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: i3.KbqTitleDirective, selector: "[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: ["forDisabledComponent", "ignoreTooltipPointerEvents", "hideWithTimeout", "kbqVisible", "kbqPlacement", "kbqRelativeToPointer", "kbqPlacementPriority", "kbqTooltip", "kbqTooltipDisabled", "kbqEnterDelay", "kbqLeaveDelay", "kbqTrigger", "kbqTooltipClass", "kbqTooltipContext", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipOffset"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNotificationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqNotificationItemComponent, isStandalone: true, selector: "kbq-notification-item", inputs: { data: "data" }, host: { 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.title }}</p>\n            }\n\n            <div class=\"kbq-notification-item-time\" [class.kbq-notification-item-time_read]=\"data.read\">\n                <div class=\"kbq-notification-item-time__value\">{{ time }}</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    [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{visibility:hidden}.kbq-notification-item:hover .kbq-notification-item__remove-button{display:block}.kbq-notification-item__icon-container{flex-shrink:0;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-l);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{display:none}.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]", 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: ["forDisabledComponent", "ignoreTooltipPointerEvents", "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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqNotificationItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNotificationItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-notification-item', imports: [
                         NgTemplateOutlet,
                         KbqIconModule,
-                        NgClass,
                         KbqTitleModule,
                         KbqButtonModule,
                         KbqTooltipTrigger
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-notification-item',
-                        '[class]': 'style',
-                        '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                        [ngClass]=\"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                        [ngClass]=\"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                        [ngClass]=\"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                        [ngClass]=\"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            }\n            @if (!isTemplateRef(data.title)) {\n                <p>{{ data.title }}</p>\n            }\n\n            <div class=\"kbq-notification-item-time\" [class.kbq-notification-item-time_read]=\"data.read\">\n                <div class=\"kbq-notification-item-time__value\">{{ time }}</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            }\n            @if (!isTemplateRef(data.caption)) {\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            }\n            @if (!isTemplateRef(data.content)) {\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            }\n            @if (!isTemplateRef(data.actions)) {\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{visibility:hidden}.kbq-notification-item:hover .kbq-notification-item__remove-button{display:block}.kbq-notification-item__icon-container{flex-shrink:0;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{display:none}.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"] }]
+                        '[class]': 'style'
+                    }, 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.title }}</p>\n            }\n\n            <div class=\"kbq-notification-item-time\" [class.kbq-notification-item-time_read]=\"data.read\">\n                <div class=\"kbq-notification-item-time__value\">{{ time }}</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    [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{visibility:hidden}.kbq-notification-item:hover .kbq-notification-item__remove-button{display:block}.kbq-notification-item__icon-container{flex-shrink:0;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-l);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{display:none}.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
             }] } });
 
 const defaultOffsetX = 8;
-/** Rate-limit window (ms) for the scroll-to-bottom check that drives infinite scroll. */
-const SCROLLED_TO_BOTTOM_AUDIT_TIME = 100;
 /**default configuration of notification-center */
 const KBQ_NOTIFICATION_CENTER_DEFAULT_CONFIGURATION = ruRULocaleData.notificationCenter;
 /** Injection Token for providing configuration of notification-center */
@@ -334,25 +263,10 @@ class KbqNotificationCenterComponent extends KbqPopUp {
         this.service = inject(KbqNotificationCenterService);
         this.externalConfiguration = inject(KBQ_NOTIFICATION_CENTER_CONFIGURATION, { optional: true });
         /** @docs-private */
-        this.isTopOverflow = false;
-        /** @docs-private */
-        this.isBottomOverflow = false;
-        /** 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();
-        /** @docs-private */
         this.prefix = 'kbq-notification-center';
         /** @docs-private */
         this.isTrapFocus = false;
-        this.checkOverflow = () => {
-            const nativeElement = this.scrollContainer.contentElement.nativeElement;
-            const { scrollTop, offsetHeight, scrollHeight } = nativeElement;
-            this.isTopOverflow = scrollTop > 0;
-            this.isBottomOverflow = scrollTop + offsetHeight < scrollHeight;
-            this.changeDetectorRef.markForCheck();
-        };
+        this.switcher = viewChild.required('notificationSwitcher');
         this.updateLocaleParams = () => {
             this.configuration = this.externalConfiguration || this.localeService?.getParams('notificationCenter');
             this.changeDetectorRef.markForCheck();
@@ -363,68 +277,14 @@ class KbqNotificationCenterComponent extends KbqPopUp {
         }
     }
     ngAfterViewInit() {
-        this.visibleChange.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((state) => {
+        this.visibleChange.subscribe((state) => {
             if (this.offset !== null && state) {
                 applyPopupMargins(this.renderer, this.elementRef.nativeElement, this.prefix, `${this.offset.toString()}px`);
             }
             this.setStickPosition();
         });
-        this.service.changes
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => this.changeDetectorRef.markForCheck());
-        this.switcher.focus();
-        setTimeout(this.checkOverflow);
-        this.subscribeToScrolledToBottom();
-    }
-    /** Handles the list container scroll: updates overflow shadows and feeds the scroll-to-bottom check.
-     * @docs-private */
-    onContainerScroll() {
-        this.checkOverflow();
-        this.scroll$.next();
-    }
-    /** 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>.
-        this.focusScrollContainer();
-        // 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();
-    }
-    /**
-     * 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.
-     */
-    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$)
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => this.requestNextPage());
-    }
-    /** Whether the list is scrolled to within `scrolledToBottomOffset` pixels of the bottom. */
-    isScrolledToBottom() {
-        const { scrollTop, clientHeight, scrollHeight } = this.scrollContainer.contentElement.nativeElement;
-        return scrollHeight - scrollTop - clientHeight <= this.scrolledToBottomOffset;
-    }
-    /** 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();
-        }
-    }
-    focusScrollContainer() {
-        const element = this.scrollContainer.contentElement.nativeElement;
-        // tabindex -1 keeps the container out of the Tab order while allowing programmatic focus.
-        element.setAttribute('tabindex', '-1');
-        element.focus({ preventScroll: true });
+        this.service.changes.subscribe(() => this.changeDetectorRef.markForCheck());
+        this.switcher().focus();
     }
     /** @docs-private */
     updateClassMap(placement, customClass, size) {
@@ -441,10 +301,10 @@ class KbqNotificationCenterComponent extends KbqPopUp {
     initDefaultParams() {
         this.configuration = KBQ_NOTIFICATION_CENTER_DEFAULT_CONFIGURATION;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqNotificationCenterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", 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: "scrollContainer", first: true, predicate: KbqScrollbar, descendants: true }, { propertyName: "switcher", first: true, predicate: ["notificationSwitcher"], descendants: 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            #dropdownTrigger=\"kbqDropdownTrigger\"\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            [kbqTooltipDisabled]=\"dropdownTrigger.opened\"\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    kbq-scrollbar\n    class=\"kbq-notification-center-container\"\n    data-testid=\"kbq-notification-center-container\"\n    [class.kbq-notification-center_bottom-overflow]=\"isBottomOverflow\"\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                    [class.kbq-notification-center_top-overflow]=\"isTopOverflow\"\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{display:flex}.kbq-notification-center-sub-header:first-child.kbq-notification-center_top-overflow{box-shadow:var(--kbq-shadow-overflow-normal-bottom)}.kbq-notification-center-container{height:100%;border-radius:inherit;padding-bottom:var(--kbq-size-xl)}.kbq-notification-center-container .kbq-loader-overlay_parent{border-radius:inherit}.kbq-notification-center-container.kbq-notification-center_bottom-overflow{box-shadow:var(--kbq-shadow-overflow-normal-bottom)}.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", "inset", "paddings"] }, { kind: "ngmodule", type: KbqDropdownModule }, { kind: "component", type: i5.KbqDropdown, selector: "kbq-dropdown", inputs: ["navigationWithWrap", "xPosition", "yPosition", "overlapTriggerY", "overlapTriggerX", "hasBackdrop", "class", "backdropClass"], outputs: ["closed"], exportAs: ["kbqDropdown"] }, { kind: "component", type: i5.KbqDropdownItem, selector: "kbq-dropdown-item, [kbq-dropdown-item]", inputs: ["disabled"], 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: ["forDisabledComponent", "ignoreTooltipPointerEvents", "hideWithTimeout", "kbqVisible", "kbqPlacement", "kbqRelativeToPointer", "kbqPlacementPriority", "kbqTooltip", "kbqTooltipDisabled", "kbqEnterDelay", "kbqLeaveDelay", "kbqTrigger", "kbqTooltipClass", "kbqTooltipContext", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipOffset"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { 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"] }], animations: [KbqNotificationCenterAnimations.state], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNotificationCenterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", 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 }], 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            #dropdownTrigger=\"kbqDropdownTrigger\"\n            kbq-button\n            class=\"kbq-notification-center-title__button\"\n            [kbqDropdownTriggerFor]=\"notificationSwitcherDropdown\"\n            [kbqTooltip]=\"service.silentMode.value ? localeData.doNotDisturb : localeData.showPopUpNotifications\"\n            [kbqTooltipArrow]=\"false\"\n            [kbqTooltipOffset]=\"4\"\n            [kbqTooltipDisabled]=\"dropdownTrigger.opened\"\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                [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            [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    [kbqOverflowShadowBottom]=\"notificationCenterContainer\"\n    [shadow]=\"'var(--kbq-shadow-overflow-normal-bottom)'\"\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                    [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                        [kbqStyle]=\"'transparent'\"\n                        [color]=\"'contrast'\"\n                        [kbqTooltip]=\"localeData.remove\"\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                <div class=\"kbq-notification-center-empty-container\">\n                    <i kbq-icon-item=\"kbq-bell_16\" [big]=\"true\" [color]=\"'contrast-fade'\"></i>\n                    {{ localeData.noNotifications }}\n                </div>\n            }\n        } @else {\n            <kbq-loader-overlay [transparent]=\"true\" />\n        }\n    } @else {\n        <div class=\"kbq-notification-center-error-container\">\n            <i kbq-icon-item=\"kbq-bell_16\" [big]=\"true\" [color]=\"'error'\" [fade]=\"true\"></i>\n            {{ localeData.failedToLoadNotifications }}\n            <button kbq-button [kbqStyle]=\"'transparent'\" [color]=\"'theme'\" (click)=\"service.onReload.emit()\">\n                {{ localeData.repeat }}\n            </button>\n        </div>\n    }\n</div>\n\n<kbq-dropdown #notificationSwitcherDropdown=\"kbqDropdown\">\n    <button kbq-dropdown-item (click)=\"service.setSilentMode(false)\">\n        <i kbq-icon=\"{{ !service.silentMode.value ? 'kbq-circle-xs_16' : '' }}\" [style.min-width.px]=\"16\"></i>\n        {{ localeData.showPopUpNotifications }}\n    </button>\n    <button kbq-dropdown-item (click)=\"service.setSilentMode(true)\">\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-xl) 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-xxl)}.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{display:flex}.kbq-notification-center-container{height:100%;border-radius:inherit;padding-bottom:var(--kbq-size-m)}.kbq-notification-center-container .kbq-loader-overlay_parent{border-radius:inherit}.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{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"], outputs: ["closed"], exportAs: ["kbqDropdown"] }, { kind: "component", type: i5.KbqDropdownItem, selector: "kbq-dropdown-item, [kbq-dropdown-item]", inputs: ["disabled"], 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: ["forDisabledComponent", "ignoreTooltipPointerEvents", "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: "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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqNotificationCenterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNotificationCenterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-notification-center', imports: [
                         KbqIconModule,
@@ -457,25 +317,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         AsyncPipe,
                         KbqNotificationItemComponent,
                         KbqLoaderOverlayModule,
-                        KbqProgressSpinnerModule
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, host: {
+                        KbqOverflowShadowContainer,
+                        KbqOverflowShadowTop,
+                        KbqOverflowShadowBottom
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-notification-center',
                         '[class.kbq-notification-center_popover]': 'popoverMode',
                         '(keydown.escape)': 'escapeHandler()'
-                    }, animations: [KbqNotificationCenterAnimations.state], 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            #dropdownTrigger=\"kbqDropdownTrigger\"\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            [kbqTooltipDisabled]=\"dropdownTrigger.opened\"\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    kbq-scrollbar\n    class=\"kbq-notification-center-container\"\n    data-testid=\"kbq-notification-center-container\"\n    [class.kbq-notification-center_bottom-overflow]=\"isBottomOverflow\"\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                    [class.kbq-notification-center_top-overflow]=\"isTopOverflow\"\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{display:flex}.kbq-notification-center-sub-header:first-child.kbq-notification-center_top-overflow{box-shadow:var(--kbq-shadow-overflow-normal-bottom)}.kbq-notification-center-container{height:100%;border-radius:inherit;padding-bottom:var(--kbq-size-xl)}.kbq-notification-center-container .kbq-loader-overlay_parent{border-radius:inherit}.kbq-notification-center-container.kbq-notification-center_bottom-overflow{box-shadow:var(--kbq-shadow-overflow-normal-bottom)}.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: { scrollContainer: [{
-                type: ViewChild,
-                args: [KbqScrollbar]
-            }], switcher: [{
-                type: ViewChild,
-                args: ['notificationSwitcher']
-            }] } });
+                    }, 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            #dropdownTrigger=\"kbqDropdownTrigger\"\n            kbq-button\n            class=\"kbq-notification-center-title__button\"\n            [kbqDropdownTriggerFor]=\"notificationSwitcherDropdown\"\n            [kbqTooltip]=\"service.silentMode.value ? localeData.doNotDisturb : localeData.showPopUpNotifications\"\n            [kbqTooltipArrow]=\"false\"\n            [kbqTooltipOffset]=\"4\"\n            [kbqTooltipDisabled]=\"dropdownTrigger.opened\"\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                [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            [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    [kbqOverflowShadowBottom]=\"notificationCenterContainer\"\n    [shadow]=\"'var(--kbq-shadow-overflow-normal-bottom)'\"\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                    [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                        [kbqStyle]=\"'transparent'\"\n                        [color]=\"'contrast'\"\n                        [kbqTooltip]=\"localeData.remove\"\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                <div class=\"kbq-notification-center-empty-container\">\n                    <i kbq-icon-item=\"kbq-bell_16\" [big]=\"true\" [color]=\"'contrast-fade'\"></i>\n                    {{ localeData.noNotifications }}\n                </div>\n            }\n        } @else {\n            <kbq-loader-overlay [transparent]=\"true\" />\n        }\n    } @else {\n        <div class=\"kbq-notification-center-error-container\">\n            <i kbq-icon-item=\"kbq-bell_16\" [big]=\"true\" [color]=\"'error'\" [fade]=\"true\"></i>\n            {{ localeData.failedToLoadNotifications }}\n            <button kbq-button [kbqStyle]=\"'transparent'\" [color]=\"'theme'\" (click)=\"service.onReload.emit()\">\n                {{ localeData.repeat }}\n            </button>\n        </div>\n    }\n</div>\n\n<kbq-dropdown #notificationSwitcherDropdown=\"kbqDropdown\">\n    <button kbq-dropdown-item (click)=\"service.setSilentMode(false)\">\n        <i kbq-icon=\"{{ !service.silentMode.value ? 'kbq-circle-xs_16' : '' }}\" [style.min-width.px]=\"16\"></i>\n        {{ localeData.showPopUpNotifications }}\n    </button>\n    <button kbq-dropdown-item (click)=\"service.setSilentMode(true)\">\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-xl) 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-xxl)}.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{display:flex}.kbq-notification-center-container{height:100%;border-radius:inherit;padding-bottom:var(--kbq-size-m)}.kbq-notification-center-container .kbq-loader-overlay_parent{border-radius:inherit}.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{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 }] }] } });
 class KbqNotificationCenterTrigger extends KbqPopUpTrigger {
     /** Number of unread notifications */
     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;
     }
@@ -485,6 +343,8 @@ class KbqNotificationCenterTrigger extends KbqPopUpTrigger {
         this.updatePlacementPriority(['bottomCenter', 'bottomLeft', 'bottomRight']);
     }
     /** 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.
     get popoverHeight() {
         return this._popoverHeight;
     }
@@ -495,6 +355,8 @@ class KbqNotificationCenterTrigger extends KbqPopUpTrigger {
         }
     }
     /** 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;
     }
@@ -531,13 +393,17 @@ class KbqNotificationCenterTrigger extends KbqPopUpTrigger {
         /** @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;
         /** 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';
         /** Offset of popUp */
+        // TODO: Skipped for migration because:
+        //  Class of this input is referenced in the signature of another class.
         this.offset = defaultOffsetX;
-        /** Distance in pixels from the bottom of the list at which the next page is requested via `onNextPage`. */
-        this.scrolledToBottomOffset = 0;
         this._popoverMode = false;
         /** Emits a change event whenever the placement state changes. */
         this.placementChange = new EventEmitter();
@@ -552,7 +418,7 @@ class KbqNotificationCenterTrigger extends KbqPopUpTrigger {
     ngAfterContentInit() {
         this.visibleChange.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((visible) => {
             if (visible) {
-                // eslint-disable-next-line rxjs/no-nested-subscribe
+                // eslint-disable-next-line rxjs-x/no-nested-subscribe
                 this.preventClosingByInnerScrollSubscription = this.closingActions().subscribe((event) => {
                     if (event && event['scrollDispatcher']) {
                         this.instance.setStickPosition();
@@ -562,7 +428,7 @@ class KbqNotificationCenterTrigger extends KbqPopUpTrigger {
                 });
             }
             else {
-                this.preventClosingByInnerScrollSubscription?.unsubscribe();
+                this.preventClosingByInnerScrollSubscription.unsubscribe();
                 this.focus();
             }
         });
@@ -578,7 +444,6 @@ class KbqNotificationCenterTrigger extends KbqPopUpTrigger {
         this.instance.footer = this.footer;
         this.instance.popoverMode = this.popoverMode;
         this.instance.popoverHeight = this.popoverHeight;
-        this.instance.scrolledToBottomOffset = this.scrolledToBottomOffset;
         this.instance.updateTrapFocus(this.trigger !== PopUpTriggers.Focus);
         if (this.isOpen) {
             this.updatePosition(true);
@@ -611,18 +476,18 @@ class KbqNotificationCenterTrigger extends KbqPopUpTrigger {
     closingActions() {
         return merge(this.overlayRef.outsidePointerEvents(), this.overlayRef.backdropClick(), this.scrollDispatcher.scrolled());
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqNotificationCenterTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.21", 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" } }, exportAs: ["kbqNotificationCenterTrigger"], usesInheritance: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNotificationCenterTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.25", type: KbqNotificationCenterTrigger, isStandalone: true, selector: "[kbqNotificationCenterTrigger]", inputs: { placement: ["kbqNotificationCenterPlacement", "placement"], backdropClass: "backdropClass", panelClass: ["kbqNotificationCenterPanelClass", "panelClass"], offset: ["offset", "offset", 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" } }, exportAs: ["kbqNotificationCenterTrigger"], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqNotificationCenterTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNotificationCenterTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqNotificationCenterTrigger]',
-                    exportAs: 'kbqNotificationCenterTrigger',
                     host: {
                         '[class.kbq-notification-center_open]': 'isOpen',
                         '[class.kbq-active]': 'hasClickTrigger && isOpen'
-                    }
+                    },
+                    exportAs: 'kbqNotificationCenterTrigger'
                 }]
         }], ctorParameters: () => [], propDecorators: { placement: [{
                 type: Input,
@@ -635,9 +500,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
             }], offset: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
-            }], scrolledToBottomOffset: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
             }], popoverMode: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -659,33 +521,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
             }] } });
 
 class KbqNotificationCenterModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqNotificationCenterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: KbqNotificationCenterModule, imports: [KbqNotificationCenterComponent,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNotificationCenterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqNotificationCenterModule, imports: [KbqNotificationCenterComponent,
             KbqNotificationCenterTrigger], exports: [KbqNotificationCenterComponent,
             KbqNotificationCenterTrigger] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqNotificationCenterModule, providers: [
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNotificationCenterModule, providers: [
             KBQ_NOTIFICATION_CENTER_SCROLL_STRATEGY_FACTORY_PROVIDER,
             { provide: FocusTrapFactory, useClass: ConfigurableFocusTrapFactory },
             { provide: FOCUS_TRAP_INERT_STRATEGY, useClass: EmptyFocusTrapStrategy },
-            { provide: KbqNotificationCenterService, deps: [DateAdapter, DateFormatter] }
+            KbqNotificationCenterService
         ], imports: [KbqNotificationCenterComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqNotificationCenterModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNotificationCenterModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
                         KbqNotificationCenterComponent,
                         KbqNotificationCenterTrigger
                     ],
-                    exports: [
-                        KbqNotificationCenterComponent,
-                        KbqNotificationCenterTrigger
-                    ],
                     providers: [
                         KBQ_NOTIFICATION_CENTER_SCROLL_STRATEGY_FACTORY_PROVIDER,
                         { provide: FocusTrapFactory, useClass: ConfigurableFocusTrapFactory },
                         { provide: FOCUS_TRAP_INERT_STRATEGY, useClass: EmptyFocusTrapStrategy },
-                        { provide: KbqNotificationCenterService, deps: [DateAdapter, DateFormatter] }
+                        KbqNotificationCenterService
+                    ],
+                    exports: [
+                        KbqNotificationCenterComponent,
+                        KbqNotificationCenterTrigger
                     ]
                 }]
         }] });