@koobiq/components 20.1.0 → 20.3.0

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

@@ -25,7 +25,7 @@ import * as i6 from '@koobiq/components/tooltip';
 import { KbqTooltipTrigger, KbqToolTipModule } from '@koobiq/components/tooltip';
 import { combineLatestWith, BehaviorSubject, merge, Subject } from 'rxjs';
 import { map, filter, auditTime, distinctUntilChanged, pairwise } from 'rxjs/operators';
-import { trigger, state, transition, style, animate } from '@angular/animations';
+import { trigger, state, style, transition, animate } from '@angular/animations';
 import { KbqToastService } from '@koobiq/components/toast';
 import * as i3 from '@koobiq/components/title';
 import { KbqTitleModule } from '@koobiq/components/title';
@@ -223,10 +223,10 @@ class KbqNotificationCenterService {
         items.forEach((item) => (item.read = item.read ?? false));
         return items;
     }
-    /** @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' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNotificationCenterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNotificationCenterService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNotificationCenterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNotificationCenterService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -270,10 +270,10 @@ class KbqNotificationItemComponent {
     isTemplateRef(value) {
         return value instanceof TemplateRef;
     }
-    /** @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: { attributes: { "data-testid": "kbq-notification-item" }, properties: { "class": "style" }, classAttribute: "kbq-notification-item" }, hostDirectives: [{ directive: i1$1.KbqReadStateDirective }], ngImport: i0, template: "@if (data.icon) {\n    <div class=\"kbq-notification-item__icon-container layout-row layout-align-start-start\">\n        @if (data.icon === true) {\n            @switch (data.style) {\n                @case ('contrast') {\n                    <i\n                        kbq-icon=\"kbq-circle-info_16\"\n                        class=\"kbq-notification-item__icon\"\n                        [color]=\"$any(data.style)\"\n                        [class]=\"data.iconClass\"\n                    ></i>\n                }\n                @case ('success') {\n                    <i\n                        kbq-icon=\"kbq-circle-check_16\"\n                        class=\"kbq-notification-item__icon\"\n                        [color]=\"$any(data.style)\"\n                        [class]=\"data.iconClass\"\n                    ></i>\n                }\n                @case ('warning') {\n                    <i\n                        kbq-icon=\"kbq-triangle-exclamation_16\"\n                        class=\"kbq-notification-item__icon\"\n                        [color]=\"$any(data.style)\"\n                        [class]=\"data.iconClass\"\n                    ></i>\n                }\n                @case ('error') {\n                    <i\n                        kbq-icon=\"kbq-triangle-exclamation_16\"\n                        class=\"kbq-notification-item__icon\"\n                        [color]=\"$any(data.style)\"\n                        [class]=\"data.iconClass\"\n                    ></i>\n                }\n            }\n        } @else if (isTemplateRef(data.icon)) {\n            <ng-container [ngTemplateOutlet]=\"$any(data.icon)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n        }\n    </div>\n}\n\n<div class=\"kbq-notification-item__container\">\n    @if (data.title) {\n        <div\n            kbq-title\n            class=\"kbq-notification-item__title\"\n            [class.kbq-notification-item__title_with-content]=\"data.caption || data.content\"\n        >\n            @if (isTemplateRef(data.title)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.title)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            } @else {\n                <p>{{ data.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    data-testid=\"kbq-notification-item-remove-button\"\n    [kbqStyle]=\"'transparent'\"\n    [color]=\"'contrast'\"\n    [kbqTooltipArrow]=\"false\"\n    [kbqTooltip]=\"center.localeData.remove\"\n    [kbqPlacement]=\"popUpPlacements.Right\"\n    (click)=\"service.remove(data)\"\n>\n    <i kbq-icon=\"kbq-trash_16\"></i>\n</button>\n", styles: [".kbq-notification-item{display:flex;box-sizing:border-box;position:relative;border-radius:var(--kbq-size-s);height:auto;margin-left:var(--kbq-size-m);margin-right:var(--kbq-size-m)}.kbq-notification-item:hover .kbq-notification-item-time,.kbq-notification-item:focus-within .kbq-notification-item-time{visibility:hidden}.kbq-notification-item:hover .kbq-notification-item__remove-button,.kbq-notification-item:focus-within .kbq-notification-item__remove-button{display:block}.kbq-notification-item__icon-container{flex-shrink:0;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: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: i3.KbqTitleDirective, selector: "[kbq-title]", inputs: ["kbq-title"], exportAs: ["kbqTitle"] }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i3$1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i3$1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "directive", type: KbqTooltipTrigger, selector: "[kbqTooltip]", inputs: ["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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNotificationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqNotificationItemComponent, isStandalone: true, selector: "kbq-notification-item", inputs: { data: "data" }, host: { attributes: { "data-testid": "kbq-notification-item" }, properties: { "class": "style" }, classAttribute: "kbq-notification-item" }, hostDirectives: [{ directive: i1$1.KbqReadStateDirective }], ngImport: i0, template: "@if (data.icon) {\n    <div class=\"kbq-notification-item__icon-container layout-row layout-align-start-start\">\n        @if (data.icon === true) {\n            @switch (data.style) {\n                @case ('contrast') {\n                    <i\n                        kbq-icon=\"kbq-circle-info_16\"\n                        class=\"kbq-notification-item__icon\"\n                        [color]=\"$any(data.style)\"\n                        [class]=\"data.iconClass\"\n                    ></i>\n                }\n                @case ('success') {\n                    <i\n                        kbq-icon=\"kbq-circle-check_16\"\n                        class=\"kbq-notification-item__icon\"\n                        [color]=\"$any(data.style)\"\n                        [class]=\"data.iconClass\"\n                    ></i>\n                }\n                @case ('warning') {\n                    <i\n                        kbq-icon=\"kbq-triangle-exclamation_16\"\n                        class=\"kbq-notification-item__icon\"\n                        [color]=\"$any(data.style)\"\n                        [class]=\"data.iconClass\"\n                    ></i>\n                }\n                @case ('error') {\n                    <i\n                        kbq-icon=\"kbq-triangle-exclamation_16\"\n                        class=\"kbq-notification-item__icon\"\n                        [color]=\"$any(data.style)\"\n                        [class]=\"data.iconClass\"\n                    ></i>\n                }\n            }\n        } @else if (isTemplateRef(data.icon)) {\n            <ng-container [ngTemplateOutlet]=\"$any(data.icon)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n        }\n    </div>\n}\n\n<div class=\"kbq-notification-item__container\">\n    @if (data.title) {\n        <div\n            kbq-title\n            class=\"kbq-notification-item__title\"\n            [class.kbq-notification-item__title_with-content]=\"data.caption || data.content\"\n        >\n            @if (isTemplateRef(data.title)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.title)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            } @else {\n                <p>{{ data.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    data-testid=\"kbq-notification-item-remove-button\"\n    [kbqStyle]=\"'transparent'\"\n    [color]=\"'contrast'\"\n    [kbqTooltipArrow]=\"false\"\n    [kbqTooltip]=\"center.localeData.remove\"\n    [kbqPlacement]=\"popUpPlacements.Right\"\n    (click)=\"service.remove(data)\"\n>\n    <i kbq-icon=\"kbq-trash_16\"></i>\n</button>\n", styles: [".kbq-notification-item{display:flex;box-sizing:border-box;position:relative;border-radius:var(--kbq-size-s);height:auto;margin-left:var(--kbq-size-m);margin-right:var(--kbq-size-m)}.kbq-notification-item:hover .kbq-notification-item-time,.kbq-notification-item:focus-within .kbq-notification-item-time{visibility:hidden}.kbq-notification-item:hover .kbq-notification-item__remove-button,.kbq-notification-item:focus-within .kbq-notification-item__remove-button{display:block}.kbq-notification-item__icon-container{flex-shrink:0;box-sizing:content-box;width:var(--kbq-size-l);max-width:var(--kbq-size-l);height:var(--kbq-size-l);max-height:var(--kbq-size-l);margin-right:var(--kbq-size-s);padding-left:var(--kbq-size-m);padding-top:14px}.kbq-notification-item__container{display:flex;flex-direction:column;flex:1;padding-top:var(--kbq-size-m);padding-right:var(--kbq-size-s);padding-bottom:var(--kbq-size-m);overflow:hidden}.kbq-notification-item__title{display:flex;flex-direction:row;justify-content:space-between;overflow:hidden;text-overflow:ellipsis}.kbq-notification-item__title>p{margin:0;overflow:hidden;text-overflow:ellipsis}.kbq-notification-item__title.kbq-notification-item__title_with-content{margin-bottom:var(--kbq-size-xxs)}.kbq-notification-item-time{display:flex;flex-direction:row;height:var(--kbq-size-xl);align-items:center;padding-left:22px}.kbq-notification-item-time .kbq-notification-item-time__value{margin-right:var(--kbq-size-3xs)}.kbq-notification-item-time.kbq-notification-item-time_read .kbq-notification-item-time__state{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]", inputs: ["kbq-title"], exportAs: ["kbqTitle"] }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i3$1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i3$1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "directive", type: KbqTooltipTrigger, selector: "[kbqTooltip]", inputs: ["kbqTooltipScrollStrategy", "forDisabledComponent", "ignoreTooltipPointerEvents", "kbqTooltipSingleInstance", "hideWithTimeout", "kbqVisible", "kbqPlacement", "kbqRelativeToPointer", "kbqPlacementPriority", "kbqTooltip", "kbqTooltipDisabled", "kbqEnterDelay", "kbqLeaveDelay", "kbqTrigger", "kbqTooltipClass", "kbqTooltipContext", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipOffset", "kbqTooltipModifier", "kbqTooltipHeader"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNotificationItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNotificationItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-notification-item', imports: [
                         NgTemplateOutlet,
@@ -285,7 +285,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         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                        [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    data-testid=\"kbq-notification-item-remove-button\"\n    [kbqStyle]=\"'transparent'\"\n    [color]=\"'contrast'\"\n    [kbqTooltipArrow]=\"false\"\n    [kbqTooltip]=\"center.localeData.remove\"\n    [kbqPlacement]=\"popUpPlacements.Right\"\n    (click)=\"service.remove(data)\"\n>\n    <i kbq-icon=\"kbq-trash_16\"></i>\n</button>\n", styles: [".kbq-notification-item{display:flex;box-sizing:border-box;position:relative;border-radius:var(--kbq-size-s);height:auto;margin-left:var(--kbq-size-m);margin-right:var(--kbq-size-m)}.kbq-notification-item:hover .kbq-notification-item-time,.kbq-notification-item:focus-within .kbq-notification-item-time{visibility:hidden}.kbq-notification-item:hover .kbq-notification-item__remove-button,.kbq-notification-item:focus-within .kbq-notification-item__remove-button{display:block}.kbq-notification-item__icon-container{flex-shrink:0;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"] }]
+                    }, 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    data-testid=\"kbq-notification-item-remove-button\"\n    [kbqStyle]=\"'transparent'\"\n    [color]=\"'contrast'\"\n    [kbqTooltipArrow]=\"false\"\n    [kbqTooltip]=\"center.localeData.remove\"\n    [kbqPlacement]=\"popUpPlacements.Right\"\n    (click)=\"service.remove(data)\"\n>\n    <i kbq-icon=\"kbq-trash_16\"></i>\n</button>\n", styles: [".kbq-notification-item{display:flex;box-sizing:border-box;position:relative;border-radius:var(--kbq-size-s);height:auto;margin-left:var(--kbq-size-m);margin-right:var(--kbq-size-m)}.kbq-notification-item:hover .kbq-notification-item-time,.kbq-notification-item:focus-within .kbq-notification-item-time{visibility:hidden}.kbq-notification-item:hover .kbq-notification-item__remove-button,.kbq-notification-item:focus-within .kbq-notification-item__remove-button{display:block}.kbq-notification-item__icon-container{flex-shrink:0;box-sizing:content-box;width:var(--kbq-size-l);max-width:var(--kbq-size-l);height:var(--kbq-size-l);max-height:var(--kbq-size-l);margin-right:var(--kbq-size-s);padding-left:var(--kbq-size-m);padding-top:14px}.kbq-notification-item__container{display:flex;flex-direction:column;flex:1;padding-top:var(--kbq-size-m);padding-right:var(--kbq-size-s);padding-bottom:var(--kbq-size-m);overflow:hidden}.kbq-notification-item__title{display:flex;flex-direction:row;justify-content:space-between;overflow:hidden;text-overflow:ellipsis}.kbq-notification-item__title>p{margin:0;overflow:hidden;text-overflow:ellipsis}.kbq-notification-item__title.kbq-notification-item__title_with-content{margin-bottom:var(--kbq-size-xxs)}.kbq-notification-item-time{display:flex;flex-direction:row;height:var(--kbq-size-xl);align-items:center;padding-left:22px}.kbq-notification-item-time .kbq-notification-item-time__value{margin-right:var(--kbq-size-3xs)}.kbq-notification-item-time.kbq-notification-item-time_read .kbq-notification-item-time__state{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
             }] } });
@@ -293,12 +293,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 const defaultOffsetX = 8;
 /** Rate-limit window (ms) for the scroll-to-bottom check that drives infinite scroll. */
 const SCROLLED_TO_BOTTOM_AUDIT_TIME = 100;
+/**
+ * Tolerance (px) applied when checking whether the list has reached its bottom.
+ *
+ * `scrollHeight` and `clientHeight` are CSSOM `long`s (rounded to the nearest integer) while
+ * `scrollTop` is an `unrestricted double`. At fractional browser zoom or a fractional
+ * `devicePixelRatio` the layout lands on fractional CSS pixels and the two roundings go
+ * independently, so at the true bottom `scrollHeight - scrollTop - clientHeight` lands anywhere in
+ * (-1, 1) rather than on 0 — an exact `<= 0` check then succeeds only about half the time. Below
+ * 100% zoom one device pixel is wider than one CSS pixel, which scales the residual by ~1/zoom and
+ * pushes it past 1. 2px covers zoom down to 50% and is imperceptible as a trigger threshold.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight
+ */
+const SCROLLED_TO_BOTTOM_TOLERANCE = 2;
 /**default configuration of notification-center */
 const KBQ_NOTIFICATION_CENTER_DEFAULT_CONFIGURATION = ruRULocaleData.notificationCenter;
 /** Injection Token for providing configuration of notification-center */
 const KBQ_NOTIFICATION_CENTER_CONFIGURATION = new InjectionToken('KbqNotificationCenterConfiguration');
 /** @docs-private */
-const KBQ_NOTIFICATION_CENTER_SCROLL_STRATEGY = new InjectionToken('kbq-notification-center-scroll-strategy');
+const KBQ_NOTIFICATION_CENTER_SCROLL_STRATEGY = new InjectionToken('kbq-notification-center-scroll-strategy', {
+    providedIn: 'root',
+    factory: () => kbqNotificationCenterScrollStrategyFactory(inject(Overlay))
+});
 /** @docs-private */
 function kbqNotificationCenterScrollStrategyFactory(overlay) {
     return () => overlay.scrollStrategies.reposition({ scrollThrottle: 20 });
@@ -402,10 +419,11 @@ class KbqNotificationCenterComponent extends KbqPopUp {
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(() => this.requestNextPage());
     }
-    /** Whether the list is scrolled to within `scrolledToBottomOffset` pixels of the bottom. */
+    /** Whether the list is scrolled to within `scrolledToBottomOffset` pixels of the bottom.
+     * Sub-pixel measurement error is absorbed by `SCROLLED_TO_BOTTOM_TOLERANCE`. */
     isScrolledToBottom() {
         const { scrollTop, clientHeight, scrollHeight } = this.scrollContainer().contentElement().nativeElement;
-        return scrollHeight - scrollTop - clientHeight <= this.scrolledToBottomOffset;
+        return scrollHeight - scrollTop - clientHeight <= this.scrolledToBottomOffset + SCROLLED_TO_BOTTOM_TOLERANCE;
     }
     /** Emits `onNextPage` unless a load is already in flight, errored, or there is nothing more to load. */
     requestNextPage() {
@@ -453,10 +471,10 @@ class KbqNotificationCenterComponent extends KbqPopUp {
     initDefaultParams() {
         this.configuration = KBQ_NOTIFICATION_CENTER_DEFAULT_CONFIGURATION;
     }
-    /** @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 }, { propertyName: "scrollContainer", first: true, predicate: KbqScrollbar, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"kbq-notification-center-header\">\n    <div class=\"kbq-notification-center-title\">\n        <div class=\"kbq-notification-center-title__text\">{{ localeData.notifications }}</div>\n        <button\n            #notificationSwitcher\n            #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    #notificationCenterContainer=\"kbqOverflowShadowContainer\"\n    kbq-scrollbar\n    kbqOverflowShadowContainer\n    class=\"kbq-notification-center-container\"\n    data-testid=\"kbq-notification-center-container\"\n    [kbqOverflowShadowBottom]=\"notificationCenterContainer\"\n    [shadow]=\"'var(--kbq-shadow-overflow-normal-bottom)'\"\n    (onScroll)=\"onContainerScroll()\"\n>\n    @if (!service.errorMode.value) {\n        @if (!service.loadingMode.value) {\n            @for (group of service.groupedItems | async; track group) {\n                <div\n                    class=\"kbq-notification-center-sub-header\"\n                    data-testid=\"kbq-notification-center-group\"\n                    [kbqOverflowShadowTop]=\"$first ? notificationCenterContainer : undefined\"\n                >\n                    <div class=\"kbq-notification-center-sub-header__date\">{{ group.title }}</div>\n\n                    <button\n                        kbq-button\n                        class=\"kbq-notification-center-sub-header__button\"\n                        data-testid=\"kbq-notification-center-remove-group-button\"\n                        [kbqStyle]=\"'transparent'\"\n                        [color]=\"'contrast'\"\n                        [kbqTooltip]=\"localeData.remove\"\n                        [kbqPlacement]=\"'right'\"\n                        [kbqTooltipArrow]=\"false\"\n                        (click)=\"service.removeGroup(group)\"\n                    >\n                        <i kbq-icon=\"kbq-trash_16\"></i>\n                    </button>\n                </div>\n\n                @for (item of group.items; track item) {\n                    <kbq-notification-item [data]=\"item\" />\n                }\n            } @empty {\n                @if (!service.loadingMore.value) {\n                    <div class=\"kbq-notification-center-empty-container\" data-testid=\"kbq-notification-center-empty\">\n                        <i kbq-icon-item=\"kbq-bell_16\" [big]=\"true\" [color]=\"'contrast-fade'\"></i>\n                        {{ localeData.noNotifications }}\n                    </div>\n                }\n            }\n\n            @if (service.loadingMore.value) {\n                <div\n                    class=\"kbq-notification-center-load-more\"\n                    data-testid=\"kbq-notification-center-load-more\"\n                    role=\"status\"\n                    [attr.aria-label]=\"localeData.loadingMore\"\n                >\n                    <kbq-progress-spinner [mode]=\"'indeterminate'\" [size]=\"'compact'\" />\n                </div>\n            }\n\n            @if (service.loadMoreErrorMode.value) {\n                <div\n                    class=\"kbq-notification-center-load-more-error\"\n                    data-testid=\"kbq-notification-center-load-more-error\"\n                    role=\"alert\"\n                >\n                    {{ localeData.failedToLoadNotifications }}\n                    <button\n                        kbq-button\n                        data-testid=\"kbq-notification-center-load-more-retry-button\"\n                        [kbqStyle]=\"'transparent'\"\n                        [color]=\"'theme'\"\n                        (click)=\"retryLoadMore()\"\n                    >\n                        {{ localeData.repeat }}\n                    </button>\n                </div>\n            }\n        } @else {\n            <kbq-loader-overlay data-testid=\"kbq-notification-center-loader\" [transparent]=\"true\" />\n        }\n    } @else {\n        <div class=\"kbq-notification-center-error-container\" data-testid=\"kbq-notification-center-error\">\n            <i kbq-icon-item=\"kbq-bell_16\" [big]=\"true\" [color]=\"'error'\" [fade]=\"true\"></i>\n            {{ localeData.failedToLoadNotifications }}\n            <button\n                kbq-button\n                data-testid=\"kbq-notification-center-reload-button\"\n                [kbqStyle]=\"'transparent'\"\n                [color]=\"'theme'\"\n                (click)=\"service.onReload.emit()\"\n            >\n                {{ localeData.repeat }}\n            </button>\n        </div>\n    }\n</div>\n\n<kbq-dropdown #notificationSwitcherDropdown=\"kbqDropdown\">\n    <button\n        kbq-dropdown-item\n        data-testid=\"kbq-notification-center-show-notifications-button\"\n        (click)=\"service.setSilentMode(false)\"\n    >\n        <i kbq-icon=\"{{ !service.silentMode.value ? 'kbq-circle-xs_16' : '' }}\" [style.min-width.px]=\"16\"></i>\n        {{ localeData.showPopUpNotifications }}\n    </button>\n    <button\n        kbq-dropdown-item\n        data-testid=\"kbq-notification-center-do-not-disturb-button\"\n        (click)=\"service.setSilentMode(true)\"\n    >\n        <i kbq-icon=\"{{ service.silentMode.value ? 'kbq-circle-xs_16' : '' }}\" [style.min-width.px]=\"16\"></i>\n        {{ localeData.doNotDisturb }}\n    </button>\n</kbq-dropdown>\n", styles: [".kbq-notification-center{position:relative;display:flex;flex-direction:column;width:400px;height:100vh;box-sizing:border-box;z-index:1}.kbq-notification-center:not(.kbq-notification-center_popover){border-right:1px solid;border-left:1px solid}.kbq-notification-center.kbq-notification-center_popover{margin-top:var(--kbq-size-xxs);margin-bottom:var(--kbq-size-xxs);border-radius:var(--kbq-size-xs);height:calc(100vh - 48px);box-shadow:var(--kbq-shadow-popup)}.kbq-notification-center-header{display:flex;flex-direction:row;justify-content:space-between;padding:var(--kbq-size-m) var(--kbq-size-xl) var(--kbq-size-xxs) var(--kbq-size-xxl)}.kbq-notification-center-title{display:flex;flex-direction:row;align-items:center;gap:var(--kbq-size-xxs)}.kbq-notification-center-toolbar{display:flex;flex-direction:row;align-items:center}.kbq-notification-center-toolbar .kbq-divider.kbq-divider_vertical{height:var(--kbq-size-m)}.kbq-notification-center-sub-header{position:sticky;top:0;z-index:100;display:flex;flex-direction:row;padding:var(--kbq-size-s) var(--kbq-size-xl)}.kbq-notification-center-sub-header .kbq-notification-center-sub-header__button{position:absolute;top:0;right:var(--kbq-size-xl);display:none}.kbq-notification-center-sub-header:hover .kbq-notification-center-sub-header__button,.kbq-notification-center-sub-header:focus-within .kbq-notification-center-sub-header__button{display:flex}.kbq-notification-center-container{height:100%;border-radius:inherit;padding-bottom:var(--kbq-size-xl)}.kbq-notification-center-container [data-overlayscrollbars-viewport]{scroll-behavior:smooth}@media(prefers-reduced-motion:reduce){.kbq-notification-center-container [data-overlayscrollbars-viewport]{scroll-behavior:auto}}.kbq-notification-center-container .kbq-loader-overlay_parent{border-radius:inherit}.kbq-notification-center-load-more{display:flex;align-items:center;justify-content:center;padding:26px 0}.kbq-notification-center-load-more-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--kbq-size-xxs) var(--kbq-size-xxl);text-align:center}.kbq-notification-center-load-more-error .kbq-button{margin-top:var(--kbq-size-s)}.kbq-notification-center-empty-container,.kbq-notification-center-error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}.kbq-notification-center-empty-container .kbq-icon,.kbq-notification-center-error-container .kbq-icon{margin-bottom:var(--kbq-size-xl)}.kbq-notification-center-empty-container .kbq-button,.kbq-notification-center-error-container .kbq-button{margin-top:var(--kbq-size-s)}.kbq-notification-center,.kbq-notification-center-sub-header{background:var(--kbq-background-card)}.kbq-notification-center:not(.kbq-notification-center_popover),.kbq-notification-center-sub-header:not(.kbq-notification-center_popover){border-right-color:var(--kbq-line-contrast-less);border-left-color:var(--kbq-line-contrast-less)}.kbq-notification-center-error-container,.kbq-notification-center-load-more-error{color:var(--kbq-foreground-error)}.kbq-notification-center{font-size:var(--kbq-typography-text-normal-medium-font-size);font-style:var(--kbq-typography-text-normal-medium-font-style);font-weight:var(--kbq-typography-text-normal-medium-font-weight);line-height:var(--kbq-typography-text-normal-medium-line-height);font-family:var(--kbq-typography-text-normal-medium-font-family);text-transform:var(--kbq-typography-text-normal-medium-text-transform);font-feature-settings:var(--kbq-typography-text-normal-medium-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-medium-letter-spacing)}.kbq-notification-center-title__text{font-size:var(--kbq-typography-text-big-strong-font-size);font-style:var(--kbq-typography-text-big-strong-font-style);font-weight:var(--kbq-typography-text-big-strong-font-weight);line-height:var(--kbq-typography-text-big-strong-line-height);font-family:var(--kbq-typography-text-big-strong-font-family);text-transform:var(--kbq-typography-text-big-strong-text-transform);font-feature-settings:var(--kbq-typography-text-big-strong-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-strong-letter-spacing)}\n"], dependencies: [{ kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i1.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "component", type: i1.KbqIconItem, selector: "[kbq-icon-item]", inputs: ["kbq-icon-item", "fade", "big"] }, { kind: "ngmodule", type: KbqBadgeModule }, { kind: "ngmodule", type: KbqScrollbarModule }, { kind: "component", type: i2.KbqScrollbar, selector: "kbq-scrollbar, [kbq-scrollbar]", inputs: ["initializationTarget", "options", "events", "defer"], outputs: ["onInitialize", "onUpdate", "onDestroy", "onScroll"], exportAs: ["kbqScrollbar"] }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i3$1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i3$1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "directive", type: i3$1.KbqButtonDropdownTrigger, selector: "[kbq-button][kbqDropdownTriggerFor]" }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "component", type: i4.KbqDivider, selector: "kbq-divider", inputs: ["vertical", "paddings"] }, { kind: "ngmodule", type: KbqDropdownModule }, { kind: "component", type: i5.KbqDropdown, selector: "kbq-dropdown", inputs: ["navigationWithWrap", "xPosition", "yPosition", "overlapTriggerY", "overlapTriggerX", "hasBackdrop", "class", "backdropClass"], 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: "ngmodule", type: KbqProgressSpinnerModule }, { kind: "component", type: i8.KbqProgressSpinner, selector: "kbq-progress-spinner", inputs: ["id", "value", "mode", "size"] }, { kind: "directive", type: KbqOverflowShadowContainer, selector: "[kbqOverflowShadowContainer]", inputs: ["debounce"], exportAs: ["kbqOverflowShadowContainer"] }, { kind: "directive", type: KbqOverflowShadowTop, selector: "[kbqOverflowShadowTop]", inputs: ["kbqOverflowShadowTop", "shadow"], exportAs: ["kbqOverflowShadowTop"] }, { kind: "directive", type: KbqOverflowShadowBottom, selector: "[kbqOverflowShadowBottom]", inputs: ["kbqOverflowShadowBottom", "shadow"], exportAs: ["kbqOverflowShadowBottom"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [KbqNotificationCenterAnimations.state], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNotificationCenterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqNotificationCenterComponent, isStandalone: true, selector: "kbq-notification-center", host: { listeners: { "keydown.escape": "escapeHandler()" }, properties: { "class.kbq-notification-center_popover": "popoverMode" }, classAttribute: "kbq-notification-center" }, viewQueries: [{ propertyName: "switcher", first: true, predicate: ["notificationSwitcher"], descendants: true, isSignal: true }, { propertyName: "scrollContainer", first: true, predicate: KbqScrollbar, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"kbq-notification-center-header\">\n    <div class=\"kbq-notification-center-title\">\n        <div class=\"kbq-notification-center-title__text\">{{ localeData.notifications }}</div>\n        <button\n            #notificationSwitcher\n            kbq-button\n            class=\"kbq-notification-center-title__button\"\n            data-testid=\"kbq-notification-center-silent-mode-toggle\"\n            [kbqDropdownTriggerFor]=\"notificationSwitcherDropdown\"\n            [kbqTooltip]=\"service.silentMode.value ? localeData.doNotDisturb : localeData.showPopUpNotifications\"\n            [kbqTooltipArrow]=\"false\"\n            [kbqPlacement]=\"'right'\"\n            [kbqTooltipOffset]=\"4\"\n            [kbqStyle]=\"'transparent'\"\n            [color]=\"'contrast'\"\n        >\n            <i kbq-icon=\"{{ service.silentMode.value ? 'kbq-bell-slash_16' : 'kbq-bell_16' }}\"></i>\n        </button>\n    </div>\n    <div class=\"kbq-notification-center-toolbar\">\n        @if (!service.isEmpty) {\n            <button\n                kbq-button\n                class=\"kbq-notification-center-toolbar__button\"\n                data-testid=\"kbq-notification-center-remove-all-button\"\n                [kbqStyle]=\"'transparent'\"\n                [color]=\"'contrast'\"\n                (click)=\"service.removeAll()\"\n            >\n                <i kbq-icon=\"kbq-trash_16\"></i>\n            </button>\n\n            <kbq-divider [vertical]=\"true\" />\n        }\n\n        <button\n            kbq-button\n            class=\"kbq-notification-center-toolbar__button\"\n            data-testid=\"kbq-notification-center-close-button\"\n            [kbqStyle]=\"'transparent'\"\n            [color]=\"'contrast'\"\n            (click)=\"hide(0)\"\n        >\n            <i kbq-icon=\"kbq-xmark_16\"></i>\n        </button>\n    </div>\n</div>\n\n<div\n    #notificationCenterContainer=\"kbqOverflowShadowContainer\"\n    kbq-scrollbar\n    kbqOverflowShadowContainer\n    class=\"kbq-notification-center-container\"\n    data-testid=\"kbq-notification-center-container\"\n    [kbqOverflowShadowBottom]=\"notificationCenterContainer\"\n    [shadow]=\"'var(--kbq-shadow-overflow-normal-bottom)'\"\n    (onScroll)=\"onContainerScroll()\"\n>\n    @if (!service.errorMode.value) {\n        @if (!service.loadingMode.value) {\n            @for (group of service.groupedItems | async; track group) {\n                <div\n                    class=\"kbq-notification-center-sub-header\"\n                    data-testid=\"kbq-notification-center-group\"\n                    [kbqOverflowShadowTop]=\"$first ? notificationCenterContainer : undefined\"\n                >\n                    <div class=\"kbq-notification-center-sub-header__date\">{{ group.title }}</div>\n\n                    <button\n                        kbq-button\n                        class=\"kbq-notification-center-sub-header__button\"\n                        data-testid=\"kbq-notification-center-remove-group-button\"\n                        [kbqStyle]=\"'transparent'\"\n                        [color]=\"'contrast'\"\n                        [kbqTooltip]=\"localeData.remove\"\n                        [kbqPlacement]=\"'right'\"\n                        [kbqTooltipArrow]=\"false\"\n                        (click)=\"service.removeGroup(group)\"\n                    >\n                        <i kbq-icon=\"kbq-trash_16\"></i>\n                    </button>\n                </div>\n\n                @for (item of group.items; track item) {\n                    <kbq-notification-item [data]=\"item\" />\n                }\n            } @empty {\n                @if (!service.loadingMore.value) {\n                    <div class=\"kbq-notification-center-empty-container\" data-testid=\"kbq-notification-center-empty\">\n                        <i kbq-icon-item=\"kbq-bell_16\" [big]=\"true\" [color]=\"'contrast-fade'\"></i>\n                        {{ localeData.noNotifications }}\n                    </div>\n                }\n            }\n\n            @if (service.loadingMore.value) {\n                <div\n                    class=\"kbq-notification-center-load-more\"\n                    data-testid=\"kbq-notification-center-load-more\"\n                    role=\"status\"\n                    [attr.aria-label]=\"localeData.loadingMore\"\n                >\n                    <kbq-progress-spinner [mode]=\"'indeterminate'\" [size]=\"'compact'\" />\n                </div>\n            }\n\n            @if (service.loadMoreErrorMode.value) {\n                <div\n                    class=\"kbq-notification-center-load-more-error\"\n                    data-testid=\"kbq-notification-center-load-more-error\"\n                    role=\"alert\"\n                >\n                    {{ localeData.failedToLoadNotifications }}\n                    <button\n                        kbq-button\n                        data-testid=\"kbq-notification-center-load-more-retry-button\"\n                        [kbqStyle]=\"'transparent'\"\n                        [color]=\"'theme'\"\n                        (click)=\"retryLoadMore()\"\n                    >\n                        {{ localeData.repeat }}\n                    </button>\n                </div>\n            }\n        } @else {\n            <kbq-loader-overlay data-testid=\"kbq-notification-center-loader\" [transparent]=\"true\" />\n        }\n    } @else {\n        <div class=\"kbq-notification-center-error-container\" data-testid=\"kbq-notification-center-error\">\n            <i kbq-icon-item=\"kbq-bell_16\" [big]=\"true\" [color]=\"'error'\" [fade]=\"true\"></i>\n            {{ localeData.failedToLoadNotifications }}\n            <button\n                kbq-button\n                data-testid=\"kbq-notification-center-reload-button\"\n                [kbqStyle]=\"'transparent'\"\n                [color]=\"'theme'\"\n                (click)=\"service.onReload.emit()\"\n            >\n                {{ localeData.repeat }}\n            </button>\n        </div>\n    }\n</div>\n\n<kbq-dropdown #notificationSwitcherDropdown=\"kbqDropdown\">\n    <button\n        kbq-dropdown-item\n        data-testid=\"kbq-notification-center-show-notifications-button\"\n        (click)=\"service.setSilentMode(false)\"\n    >\n        <i kbq-icon=\"{{ !service.silentMode.value ? 'kbq-circle-xs_16' : '' }}\" [style.min-width.px]=\"16\"></i>\n        {{ localeData.showPopUpNotifications }}\n    </button>\n    <button\n        kbq-dropdown-item\n        data-testid=\"kbq-notification-center-do-not-disturb-button\"\n        (click)=\"service.setSilentMode(true)\"\n    >\n        <i kbq-icon=\"{{ service.silentMode.value ? 'kbq-circle-xs_16' : '' }}\" [style.min-width.px]=\"16\"></i>\n        {{ localeData.doNotDisturb }}\n    </button>\n</kbq-dropdown>\n", styles: [".kbq-notification-center{position:relative;display:flex;flex-direction:column;width:400px;height:100vh;box-sizing:border-box;z-index:1}.kbq-notification-center:not(.kbq-notification-center_popover){border-right:1px solid;border-left:1px solid}.kbq-notification-center.kbq-notification-center_popover{margin-top:var(--kbq-size-xxs);margin-bottom:var(--kbq-size-xxs);border-radius:var(--kbq-size-xs);height:calc(100vh - 48px);box-shadow:var(--kbq-shadow-popup)}.kbq-notification-center-header{display:flex;flex-direction:row;justify-content:space-between;padding:var(--kbq-size-m) var(--kbq-size-xl) var(--kbq-size-xxs) var(--kbq-size-xxl)}.kbq-notification-center-title{display:flex;flex-direction:row;align-items:center;gap:var(--kbq-size-xxs)}.kbq-notification-center-toolbar{display:flex;flex-direction:row;align-items:center}.kbq-notification-center-toolbar .kbq-divider.kbq-divider_vertical{height:var(--kbq-size-m)}.kbq-notification-center-sub-header{position:sticky;top:0;z-index:100;display:flex;flex-direction:row;padding:var(--kbq-size-s) var(--kbq-size-xl)}.kbq-notification-center-sub-header .kbq-notification-center-sub-header__button{position:absolute;top:0;right:var(--kbq-size-xl);display:none}.kbq-notification-center-sub-header:hover .kbq-notification-center-sub-header__button,.kbq-notification-center-sub-header:focus-within .kbq-notification-center-sub-header__button{display:flex}.kbq-notification-center-container{height:100%;border-radius:inherit;padding-bottom:var(--kbq-size-xl)}.kbq-notification-center-container [data-overlayscrollbars-viewport]{scroll-behavior:smooth}@media(prefers-reduced-motion:reduce){.kbq-notification-center-container [data-overlayscrollbars-viewport]{scroll-behavior:auto}}.kbq-notification-center-container .kbq-loader-overlay_parent{border-radius:inherit}.kbq-notification-center-load-more{display:flex;align-items:center;justify-content:center;padding:26px 0}.kbq-notification-center-load-more-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--kbq-size-xxs) var(--kbq-size-xxl);text-align:center}.kbq-notification-center-load-more-error .kbq-button{margin-top:var(--kbq-size-s)}.kbq-notification-center-empty-container,.kbq-notification-center-error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}.kbq-notification-center-empty-container .kbq-icon,.kbq-notification-center-error-container .kbq-icon{margin-bottom:var(--kbq-size-xl)}.kbq-notification-center-empty-container .kbq-button,.kbq-notification-center-error-container .kbq-button{margin-top:var(--kbq-size-s)}.kbq-notification-center,.kbq-notification-center-sub-header{background:var(--kbq-background-card)}.kbq-notification-center:not(.kbq-notification-center_popover),.kbq-notification-center-sub-header:not(.kbq-notification-center_popover){border-right-color:var(--kbq-line-contrast-less);border-left-color:var(--kbq-line-contrast-less)}.kbq-notification-center-error-container,.kbq-notification-center-load-more-error{color:var(--kbq-foreground-error)}.kbq-notification-center{font-size:var(--kbq-typography-text-normal-medium-font-size);font-style:var(--kbq-typography-text-normal-medium-font-style);font-weight:var(--kbq-typography-text-normal-medium-font-weight);line-height:var(--kbq-typography-text-normal-medium-line-height);font-family:var(--kbq-typography-text-normal-medium-font-family);text-transform:var(--kbq-typography-text-normal-medium-text-transform);font-feature-settings:var(--kbq-typography-text-normal-medium-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-medium-letter-spacing)}.kbq-notification-center-title__text{font-size:var(--kbq-typography-text-big-strong-font-size);font-style:var(--kbq-typography-text-big-strong-font-style);font-weight:var(--kbq-typography-text-big-strong-font-weight);line-height:var(--kbq-typography-text-big-strong-line-height);font-family:var(--kbq-typography-text-big-strong-font-family);text-transform:var(--kbq-typography-text-big-strong-text-transform);font-feature-settings:var(--kbq-typography-text-big-strong-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-strong-letter-spacing)}\n"], dependencies: [{ kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i1.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "component", type: i1.KbqIconItem, selector: "[kbq-icon-item]", inputs: ["kbq-icon-item", "fade", "big"] }, { kind: "ngmodule", type: KbqBadgeModule }, { kind: "ngmodule", type: KbqScrollbarModule }, { kind: "component", type: i2.KbqScrollbar, selector: "kbq-scrollbar, [kbq-scrollbar]", inputs: ["initializationTarget", "options", "events", "defer"], outputs: ["onInitialize", "onUpdate", "onDestroy", "onScroll"], exportAs: ["kbqScrollbar"] }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i3$1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i3$1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "directive", type: i3$1.KbqButtonDropdownTrigger, selector: "[kbq-button][kbqDropdownTriggerFor]" }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "component", type: i4.KbqDivider, selector: "kbq-divider", inputs: ["vertical", "paddings"] }, { kind: "ngmodule", type: KbqDropdownModule }, { kind: "component", type: i5.KbqDropdown, selector: "kbq-dropdown", inputs: ["navigationWithWrap", "xPosition", "yPosition", "overlapTriggerY", "overlapTriggerX", "hasBackdrop", "class", "backdropClass", "panelWidth", "panelMinWidth", "panelMaxWidth", "safeArea"], outputs: ["closed"], exportAs: ["kbqDropdown"] }, { kind: "component", type: i5.KbqDropdownItem, selector: "kbq-dropdown-item, [kbq-dropdown-item]", inputs: ["disabled", "progress"], exportAs: ["kbqDropdownItem"] }, { kind: "directive", type: i5.KbqDropdownTrigger, selector: "[kbqDropdownTriggerFor]", inputs: ["offsetX", "offsetY", "kbqDropdownTriggerData", "openByArrowDown", "demoteOverlay", "kbqDropdownTriggerRestoreFocus", "kbqDropdownTriggerFor"], outputs: ["dropdownOpened", "dropdownClosed"], exportAs: ["kbqDropdownTrigger"] }, { kind: "ngmodule", type: KbqToolTipModule }, { kind: "directive", type: i6.KbqTooltipTrigger, selector: "[kbqTooltip]", inputs: ["kbqTooltipScrollStrategy", "forDisabledComponent", "ignoreTooltipPointerEvents", "kbqTooltipSingleInstance", "hideWithTimeout", "kbqVisible", "kbqPlacement", "kbqRelativeToPointer", "kbqPlacementPriority", "kbqTooltip", "kbqTooltipDisabled", "kbqEnterDelay", "kbqLeaveDelay", "kbqTrigger", "kbqTooltipClass", "kbqTooltipContext", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipOffset", "kbqTooltipModifier", "kbqTooltipHeader"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }, { kind: "component", type: KbqNotificationItemComponent, selector: "kbq-notification-item", inputs: ["data"] }, { kind: "ngmodule", type: KbqLoaderOverlayModule }, { kind: "component", type: i7.KbqLoaderOverlay, selector: "kbq-loader-overlay", inputs: ["text", "caption", "size", "transparent", "card"] }, { kind: "ngmodule", type: KbqProgressSpinnerModule }, { kind: "component", type: i8.KbqProgressSpinner, selector: "kbq-progress-spinner", inputs: ["id", "value", "mode", "size"] }, { kind: "directive", type: KbqOverflowShadowContainer, selector: "[kbqOverflowShadowContainer]", inputs: ["debounce"], exportAs: ["kbqOverflowShadowContainer"] }, { kind: "directive", type: KbqOverflowShadowTop, selector: "[kbqOverflowShadowTop]", inputs: ["kbqOverflowShadowTop", "shadow"], exportAs: ["kbqOverflowShadowTop"] }, { kind: "directive", type: KbqOverflowShadowBottom, selector: "[kbqOverflowShadowBottom]", inputs: ["kbqOverflowShadowBottom", "shadow"], exportAs: ["kbqOverflowShadowBottom"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [KbqNotificationCenterAnimations.state], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNotificationCenterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNotificationCenterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-notification-center', imports: [
                         KbqIconModule,
@@ -477,7 +495,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         class: 'kbq-notification-center',
                         '[class.kbq-notification-center_popover]': 'popoverMode',
                         '(keydown.escape)': 'escapeHandler()'
-                    }, animations: [KbqNotificationCenterAnimations.state], preserveWhitespaces: false, template: "<div class=\"kbq-notification-center-header\">\n    <div class=\"kbq-notification-center-title\">\n        <div class=\"kbq-notification-center-title__text\">{{ localeData.notifications }}</div>\n        <button\n            #notificationSwitcher\n            #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    #notificationCenterContainer=\"kbqOverflowShadowContainer\"\n    kbq-scrollbar\n    kbqOverflowShadowContainer\n    class=\"kbq-notification-center-container\"\n    data-testid=\"kbq-notification-center-container\"\n    [kbqOverflowShadowBottom]=\"notificationCenterContainer\"\n    [shadow]=\"'var(--kbq-shadow-overflow-normal-bottom)'\"\n    (onScroll)=\"onContainerScroll()\"\n>\n    @if (!service.errorMode.value) {\n        @if (!service.loadingMode.value) {\n            @for (group of service.groupedItems | async; track group) {\n                <div\n                    class=\"kbq-notification-center-sub-header\"\n                    data-testid=\"kbq-notification-center-group\"\n                    [kbqOverflowShadowTop]=\"$first ? notificationCenterContainer : undefined\"\n                >\n                    <div class=\"kbq-notification-center-sub-header__date\">{{ group.title }}</div>\n\n                    <button\n                        kbq-button\n                        class=\"kbq-notification-center-sub-header__button\"\n                        data-testid=\"kbq-notification-center-remove-group-button\"\n                        [kbqStyle]=\"'transparent'\"\n                        [color]=\"'contrast'\"\n                        [kbqTooltip]=\"localeData.remove\"\n                        [kbqPlacement]=\"'right'\"\n                        [kbqTooltipArrow]=\"false\"\n                        (click)=\"service.removeGroup(group)\"\n                    >\n                        <i kbq-icon=\"kbq-trash_16\"></i>\n                    </button>\n                </div>\n\n                @for (item of group.items; track item) {\n                    <kbq-notification-item [data]=\"item\" />\n                }\n            } @empty {\n                @if (!service.loadingMore.value) {\n                    <div class=\"kbq-notification-center-empty-container\" data-testid=\"kbq-notification-center-empty\">\n                        <i kbq-icon-item=\"kbq-bell_16\" [big]=\"true\" [color]=\"'contrast-fade'\"></i>\n                        {{ localeData.noNotifications }}\n                    </div>\n                }\n            }\n\n            @if (service.loadingMore.value) {\n                <div\n                    class=\"kbq-notification-center-load-more\"\n                    data-testid=\"kbq-notification-center-load-more\"\n                    role=\"status\"\n                    [attr.aria-label]=\"localeData.loadingMore\"\n                >\n                    <kbq-progress-spinner [mode]=\"'indeterminate'\" [size]=\"'compact'\" />\n                </div>\n            }\n\n            @if (service.loadMoreErrorMode.value) {\n                <div\n                    class=\"kbq-notification-center-load-more-error\"\n                    data-testid=\"kbq-notification-center-load-more-error\"\n                    role=\"alert\"\n                >\n                    {{ localeData.failedToLoadNotifications }}\n                    <button\n                        kbq-button\n                        data-testid=\"kbq-notification-center-load-more-retry-button\"\n                        [kbqStyle]=\"'transparent'\"\n                        [color]=\"'theme'\"\n                        (click)=\"retryLoadMore()\"\n                    >\n                        {{ localeData.repeat }}\n                    </button>\n                </div>\n            }\n        } @else {\n            <kbq-loader-overlay data-testid=\"kbq-notification-center-loader\" [transparent]=\"true\" />\n        }\n    } @else {\n        <div class=\"kbq-notification-center-error-container\" data-testid=\"kbq-notification-center-error\">\n            <i kbq-icon-item=\"kbq-bell_16\" [big]=\"true\" [color]=\"'error'\" [fade]=\"true\"></i>\n            {{ localeData.failedToLoadNotifications }}\n            <button\n                kbq-button\n                data-testid=\"kbq-notification-center-reload-button\"\n                [kbqStyle]=\"'transparent'\"\n                [color]=\"'theme'\"\n                (click)=\"service.onReload.emit()\"\n            >\n                {{ localeData.repeat }}\n            </button>\n        </div>\n    }\n</div>\n\n<kbq-dropdown #notificationSwitcherDropdown=\"kbqDropdown\">\n    <button\n        kbq-dropdown-item\n        data-testid=\"kbq-notification-center-show-notifications-button\"\n        (click)=\"service.setSilentMode(false)\"\n    >\n        <i kbq-icon=\"{{ !service.silentMode.value ? 'kbq-circle-xs_16' : '' }}\" [style.min-width.px]=\"16\"></i>\n        {{ localeData.showPopUpNotifications }}\n    </button>\n    <button\n        kbq-dropdown-item\n        data-testid=\"kbq-notification-center-do-not-disturb-button\"\n        (click)=\"service.setSilentMode(true)\"\n    >\n        <i kbq-icon=\"{{ service.silentMode.value ? 'kbq-circle-xs_16' : '' }}\" [style.min-width.px]=\"16\"></i>\n        {{ localeData.doNotDisturb }}\n    </button>\n</kbq-dropdown>\n", styles: [".kbq-notification-center{position:relative;display:flex;flex-direction:column;width:400px;height:100vh;box-sizing:border-box;z-index:1}.kbq-notification-center:not(.kbq-notification-center_popover){border-right:1px solid;border-left:1px solid}.kbq-notification-center.kbq-notification-center_popover{margin-top:var(--kbq-size-xxs);margin-bottom:var(--kbq-size-xxs);border-radius:var(--kbq-size-xs);height:calc(100vh - 48px);box-shadow:var(--kbq-shadow-popup)}.kbq-notification-center-header{display:flex;flex-direction:row;justify-content:space-between;padding:var(--kbq-size-m) var(--kbq-size-xl) var(--kbq-size-xxs) var(--kbq-size-xxl)}.kbq-notification-center-title{display:flex;flex-direction:row;align-items:center;gap:var(--kbq-size-xxs)}.kbq-notification-center-toolbar{display:flex;flex-direction:row;align-items:center}.kbq-notification-center-toolbar .kbq-divider.kbq-divider_vertical{height:var(--kbq-size-m)}.kbq-notification-center-sub-header{position:sticky;top:0;z-index:100;display:flex;flex-direction:row;padding:var(--kbq-size-s) var(--kbq-size-xl)}.kbq-notification-center-sub-header .kbq-notification-center-sub-header__button{position:absolute;top:0;right:var(--kbq-size-xl);display:none}.kbq-notification-center-sub-header:hover .kbq-notification-center-sub-header__button,.kbq-notification-center-sub-header:focus-within .kbq-notification-center-sub-header__button{display:flex}.kbq-notification-center-container{height:100%;border-radius:inherit;padding-bottom:var(--kbq-size-xl)}.kbq-notification-center-container [data-overlayscrollbars-viewport]{scroll-behavior:smooth}@media(prefers-reduced-motion:reduce){.kbq-notification-center-container [data-overlayscrollbars-viewport]{scroll-behavior:auto}}.kbq-notification-center-container .kbq-loader-overlay_parent{border-radius:inherit}.kbq-notification-center-load-more{display:flex;align-items:center;justify-content:center;padding:26px 0}.kbq-notification-center-load-more-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--kbq-size-xxs) var(--kbq-size-xxl);text-align:center}.kbq-notification-center-load-more-error .kbq-button{margin-top:var(--kbq-size-s)}.kbq-notification-center-empty-container,.kbq-notification-center-error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}.kbq-notification-center-empty-container .kbq-icon,.kbq-notification-center-error-container .kbq-icon{margin-bottom:var(--kbq-size-xl)}.kbq-notification-center-empty-container .kbq-button,.kbq-notification-center-error-container .kbq-button{margin-top:var(--kbq-size-s)}.kbq-notification-center,.kbq-notification-center-sub-header{background:var(--kbq-background-card)}.kbq-notification-center:not(.kbq-notification-center_popover),.kbq-notification-center-sub-header:not(.kbq-notification-center_popover){border-right-color:var(--kbq-line-contrast-less);border-left-color:var(--kbq-line-contrast-less)}.kbq-notification-center-error-container,.kbq-notification-center-load-more-error{color:var(--kbq-foreground-error)}.kbq-notification-center{font-size:var(--kbq-typography-text-normal-medium-font-size);font-style:var(--kbq-typography-text-normal-medium-font-style);font-weight:var(--kbq-typography-text-normal-medium-font-weight);line-height:var(--kbq-typography-text-normal-medium-line-height);font-family:var(--kbq-typography-text-normal-medium-font-family);text-transform:var(--kbq-typography-text-normal-medium-text-transform);font-feature-settings:var(--kbq-typography-text-normal-medium-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-medium-letter-spacing)}.kbq-notification-center-title__text{font-size:var(--kbq-typography-text-big-strong-font-size);font-style:var(--kbq-typography-text-big-strong-font-style);font-weight:var(--kbq-typography-text-big-strong-font-weight);line-height:var(--kbq-typography-text-big-strong-line-height);font-family:var(--kbq-typography-text-big-strong-font-family);text-transform:var(--kbq-typography-text-big-strong-text-transform);font-feature-settings:var(--kbq-typography-text-big-strong-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-strong-letter-spacing)}\n"] }]
+                    }, animations: [KbqNotificationCenterAnimations.state], preserveWhitespaces: false, template: "<div class=\"kbq-notification-center-header\">\n    <div class=\"kbq-notification-center-title\">\n        <div class=\"kbq-notification-center-title__text\">{{ localeData.notifications }}</div>\n        <button\n            #notificationSwitcher\n            kbq-button\n            class=\"kbq-notification-center-title__button\"\n            data-testid=\"kbq-notification-center-silent-mode-toggle\"\n            [kbqDropdownTriggerFor]=\"notificationSwitcherDropdown\"\n            [kbqTooltip]=\"service.silentMode.value ? localeData.doNotDisturb : localeData.showPopUpNotifications\"\n            [kbqTooltipArrow]=\"false\"\n            [kbqPlacement]=\"'right'\"\n            [kbqTooltipOffset]=\"4\"\n            [kbqStyle]=\"'transparent'\"\n            [color]=\"'contrast'\"\n        >\n            <i kbq-icon=\"{{ service.silentMode.value ? 'kbq-bell-slash_16' : 'kbq-bell_16' }}\"></i>\n        </button>\n    </div>\n    <div class=\"kbq-notification-center-toolbar\">\n        @if (!service.isEmpty) {\n            <button\n                kbq-button\n                class=\"kbq-notification-center-toolbar__button\"\n                data-testid=\"kbq-notification-center-remove-all-button\"\n                [kbqStyle]=\"'transparent'\"\n                [color]=\"'contrast'\"\n                (click)=\"service.removeAll()\"\n            >\n                <i kbq-icon=\"kbq-trash_16\"></i>\n            </button>\n\n            <kbq-divider [vertical]=\"true\" />\n        }\n\n        <button\n            kbq-button\n            class=\"kbq-notification-center-toolbar__button\"\n            data-testid=\"kbq-notification-center-close-button\"\n            [kbqStyle]=\"'transparent'\"\n            [color]=\"'contrast'\"\n            (click)=\"hide(0)\"\n        >\n            <i kbq-icon=\"kbq-xmark_16\"></i>\n        </button>\n    </div>\n</div>\n\n<div\n    #notificationCenterContainer=\"kbqOverflowShadowContainer\"\n    kbq-scrollbar\n    kbqOverflowShadowContainer\n    class=\"kbq-notification-center-container\"\n    data-testid=\"kbq-notification-center-container\"\n    [kbqOverflowShadowBottom]=\"notificationCenterContainer\"\n    [shadow]=\"'var(--kbq-shadow-overflow-normal-bottom)'\"\n    (onScroll)=\"onContainerScroll()\"\n>\n    @if (!service.errorMode.value) {\n        @if (!service.loadingMode.value) {\n            @for (group of service.groupedItems | async; track group) {\n                <div\n                    class=\"kbq-notification-center-sub-header\"\n                    data-testid=\"kbq-notification-center-group\"\n                    [kbqOverflowShadowTop]=\"$first ? notificationCenterContainer : undefined\"\n                >\n                    <div class=\"kbq-notification-center-sub-header__date\">{{ group.title }}</div>\n\n                    <button\n                        kbq-button\n                        class=\"kbq-notification-center-sub-header__button\"\n                        data-testid=\"kbq-notification-center-remove-group-button\"\n                        [kbqStyle]=\"'transparent'\"\n                        [color]=\"'contrast'\"\n                        [kbqTooltip]=\"localeData.remove\"\n                        [kbqPlacement]=\"'right'\"\n                        [kbqTooltipArrow]=\"false\"\n                        (click)=\"service.removeGroup(group)\"\n                    >\n                        <i kbq-icon=\"kbq-trash_16\"></i>\n                    </button>\n                </div>\n\n                @for (item of group.items; track item) {\n                    <kbq-notification-item [data]=\"item\" />\n                }\n            } @empty {\n                @if (!service.loadingMore.value) {\n                    <div class=\"kbq-notification-center-empty-container\" data-testid=\"kbq-notification-center-empty\">\n                        <i kbq-icon-item=\"kbq-bell_16\" [big]=\"true\" [color]=\"'contrast-fade'\"></i>\n                        {{ localeData.noNotifications }}\n                    </div>\n                }\n            }\n\n            @if (service.loadingMore.value) {\n                <div\n                    class=\"kbq-notification-center-load-more\"\n                    data-testid=\"kbq-notification-center-load-more\"\n                    role=\"status\"\n                    [attr.aria-label]=\"localeData.loadingMore\"\n                >\n                    <kbq-progress-spinner [mode]=\"'indeterminate'\" [size]=\"'compact'\" />\n                </div>\n            }\n\n            @if (service.loadMoreErrorMode.value) {\n                <div\n                    class=\"kbq-notification-center-load-more-error\"\n                    data-testid=\"kbq-notification-center-load-more-error\"\n                    role=\"alert\"\n                >\n                    {{ localeData.failedToLoadNotifications }}\n                    <button\n                        kbq-button\n                        data-testid=\"kbq-notification-center-load-more-retry-button\"\n                        [kbqStyle]=\"'transparent'\"\n                        [color]=\"'theme'\"\n                        (click)=\"retryLoadMore()\"\n                    >\n                        {{ localeData.repeat }}\n                    </button>\n                </div>\n            }\n        } @else {\n            <kbq-loader-overlay data-testid=\"kbq-notification-center-loader\" [transparent]=\"true\" />\n        }\n    } @else {\n        <div class=\"kbq-notification-center-error-container\" data-testid=\"kbq-notification-center-error\">\n            <i kbq-icon-item=\"kbq-bell_16\" [big]=\"true\" [color]=\"'error'\" [fade]=\"true\"></i>\n            {{ localeData.failedToLoadNotifications }}\n            <button\n                kbq-button\n                data-testid=\"kbq-notification-center-reload-button\"\n                [kbqStyle]=\"'transparent'\"\n                [color]=\"'theme'\"\n                (click)=\"service.onReload.emit()\"\n            >\n                {{ localeData.repeat }}\n            </button>\n        </div>\n    }\n</div>\n\n<kbq-dropdown #notificationSwitcherDropdown=\"kbqDropdown\">\n    <button\n        kbq-dropdown-item\n        data-testid=\"kbq-notification-center-show-notifications-button\"\n        (click)=\"service.setSilentMode(false)\"\n    >\n        <i kbq-icon=\"{{ !service.silentMode.value ? 'kbq-circle-xs_16' : '' }}\" [style.min-width.px]=\"16\"></i>\n        {{ localeData.showPopUpNotifications }}\n    </button>\n    <button\n        kbq-dropdown-item\n        data-testid=\"kbq-notification-center-do-not-disturb-button\"\n        (click)=\"service.setSilentMode(true)\"\n    >\n        <i kbq-icon=\"{{ service.silentMode.value ? 'kbq-circle-xs_16' : '' }}\" [style.min-width.px]=\"16\"></i>\n        {{ localeData.doNotDisturb }}\n    </button>\n</kbq-dropdown>\n", styles: [".kbq-notification-center{position:relative;display:flex;flex-direction:column;width:400px;height:100vh;box-sizing:border-box;z-index:1}.kbq-notification-center:not(.kbq-notification-center_popover){border-right:1px solid;border-left:1px solid}.kbq-notification-center.kbq-notification-center_popover{margin-top:var(--kbq-size-xxs);margin-bottom:var(--kbq-size-xxs);border-radius:var(--kbq-size-xs);height:calc(100vh - 48px);box-shadow:var(--kbq-shadow-popup)}.kbq-notification-center-header{display:flex;flex-direction:row;justify-content:space-between;padding:var(--kbq-size-m) var(--kbq-size-xl) var(--kbq-size-xxs) var(--kbq-size-xxl)}.kbq-notification-center-title{display:flex;flex-direction:row;align-items:center;gap:var(--kbq-size-xxs)}.kbq-notification-center-toolbar{display:flex;flex-direction:row;align-items:center}.kbq-notification-center-toolbar .kbq-divider.kbq-divider_vertical{height:var(--kbq-size-m)}.kbq-notification-center-sub-header{position:sticky;top:0;z-index:100;display:flex;flex-direction:row;padding:var(--kbq-size-s) var(--kbq-size-xl)}.kbq-notification-center-sub-header .kbq-notification-center-sub-header__button{position:absolute;top:0;right:var(--kbq-size-xl);display:none}.kbq-notification-center-sub-header:hover .kbq-notification-center-sub-header__button,.kbq-notification-center-sub-header:focus-within .kbq-notification-center-sub-header__button{display:flex}.kbq-notification-center-container{height:100%;border-radius:inherit;padding-bottom:var(--kbq-size-xl)}.kbq-notification-center-container [data-overlayscrollbars-viewport]{scroll-behavior:smooth}@media(prefers-reduced-motion:reduce){.kbq-notification-center-container [data-overlayscrollbars-viewport]{scroll-behavior:auto}}.kbq-notification-center-container .kbq-loader-overlay_parent{border-radius:inherit}.kbq-notification-center-load-more{display:flex;align-items:center;justify-content:center;padding:26px 0}.kbq-notification-center-load-more-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--kbq-size-xxs) var(--kbq-size-xxl);text-align:center}.kbq-notification-center-load-more-error .kbq-button{margin-top:var(--kbq-size-s)}.kbq-notification-center-empty-container,.kbq-notification-center-error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}.kbq-notification-center-empty-container .kbq-icon,.kbq-notification-center-error-container .kbq-icon{margin-bottom:var(--kbq-size-xl)}.kbq-notification-center-empty-container .kbq-button,.kbq-notification-center-error-container .kbq-button{margin-top:var(--kbq-size-s)}.kbq-notification-center,.kbq-notification-center-sub-header{background:var(--kbq-background-card)}.kbq-notification-center:not(.kbq-notification-center_popover),.kbq-notification-center-sub-header:not(.kbq-notification-center_popover){border-right-color:var(--kbq-line-contrast-less);border-left-color:var(--kbq-line-contrast-less)}.kbq-notification-center-error-container,.kbq-notification-center-load-more-error{color:var(--kbq-foreground-error)}.kbq-notification-center{font-size:var(--kbq-typography-text-normal-medium-font-size);font-style:var(--kbq-typography-text-normal-medium-font-style);font-weight:var(--kbq-typography-text-normal-medium-font-weight);line-height:var(--kbq-typography-text-normal-medium-line-height);font-family:var(--kbq-typography-text-normal-medium-font-family);text-transform:var(--kbq-typography-text-normal-medium-text-transform);font-feature-settings:var(--kbq-typography-text-normal-medium-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-medium-letter-spacing)}.kbq-notification-center-title__text{font-size:var(--kbq-typography-text-big-strong-font-size);font-style:var(--kbq-typography-text-big-strong-font-style);font-weight:var(--kbq-typography-text-big-strong-font-weight);line-height:var(--kbq-typography-text-big-strong-line-height);font-family:var(--kbq-typography-text-big-strong-font-family);text-transform:var(--kbq-typography-text-big-strong-text-transform);font-feature-settings:var(--kbq-typography-text-big-strong-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-strong-letter-spacing)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { switcher: [{ type: i0.ViewChild, args: ['notificationSwitcher', { isSignal: true }] }], scrollContainer: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqScrollbar), { isSignal: true }] }] } });
 class KbqNotificationCenterTrigger extends KbqPopUpTrigger {
     /** Number of unread notifications */
@@ -632,10 +650,10 @@ 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: "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], 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.30", ngImport: i0, type: KbqNotificationCenterTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.30", type: KbqNotificationCenterTrigger, isStandalone: true, selector: "[kbqNotificationCenterTrigger]", inputs: { placement: ["kbqNotificationCenterPlacement", "placement"], backdropClass: "backdropClass", panelClass: ["kbqNotificationCenterPanelClass", "panelClass"], offset: ["offset", "offset", numberAttribute], scrolledToBottomOffset: ["scrolledToBottomOffset", "scrolledToBottomOffset", numberAttribute], popoverMode: ["popoverMode", "popoverMode", booleanAttribute], popoverHeight: "popoverHeight", disabled: ["disabled", "disabled", booleanAttribute], stickToWindow: "stickToWindow", container: "container" }, outputs: { placementChange: "kbqPlacementChange", visibleChange: "kbqVisibleChange" }, host: { properties: { "class.kbq-notification-center_open": "isOpen", "class.kbq-active": "hasClickTrigger && isOpen" } }, exportAs: ["kbqNotificationCenterTrigger"], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNotificationCenterTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNotificationCenterTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqNotificationCenterTrigger]',
@@ -680,18 +698,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
             }] } });
 
 class KbqNotificationCenterModule {
-    /** @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,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNotificationCenterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqNotificationCenterModule, imports: [KbqNotificationCenterComponent,
             KbqNotificationCenterTrigger], exports: [KbqNotificationCenterComponent,
             KbqNotificationCenterTrigger] }); }
-    /** @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,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNotificationCenterModule, providers: [
             { provide: FocusTrapFactory, useClass: ConfigurableFocusTrapFactory },
             { provide: FOCUS_TRAP_INERT_STRATEGY, useClass: EmptyFocusTrapStrategy },
             KbqNotificationCenterService
         ], imports: [KbqNotificationCenterComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqNotificationCenterModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNotificationCenterModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -699,7 +716,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         KbqNotificationCenterTrigger
                     ],
                     providers: [
-                        KBQ_NOTIFICATION_CENTER_SCROLL_STRATEGY_FACTORY_PROVIDER,
                         { provide: FocusTrapFactory, useClass: ConfigurableFocusTrapFactory },
                         { provide: FOCUS_TRAP_INERT_STRATEGY, useClass: EmptyFocusTrapStrategy },
                         KbqNotificationCenterService