@koobiq/components 18.34.0 → 18.36.0

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

@@ -0,0 +1,586 @@
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { Overlay } from '@angular/cdk/overlay';
+import { NgTemplateOutlet, NgClass, AsyncPipe } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, EventEmitter, Injectable, TemplateRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, InjectionToken, ChangeDetectorRef, ViewChild, numberAttribute, booleanAttribute, Directive, Output, NgModule } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { KbqBadgeModule } from '@koobiq/components/badge';
+import * as i3$1 from '@koobiq/components/button';
+import { KbqButtonModule } from '@koobiq/components/button';
+import * as i1 from '@koobiq/components/core';
+import { KbqAnimationDurations, DateAdapter, DateFormatter, KbqReadStateDirective, PopUpPlacements, ThemePalette, ruRULocaleData, KbqPopUp, KBQ_LOCALE_SERVICE, applyPopupMargins, KbqPopUpTrigger, PopUpTriggers, PopUpSizes, POSITION_TO_CSS_MAP, EmptyFocusTrapStrategy } from '@koobiq/components/core';
+import * as i4 from '@koobiq/components/divider';
+import { KbqDividerModule } from '@koobiq/components/divider';
+import * as i5 from '@koobiq/components/dropdown';
+import { KbqDropdownModule } from '@koobiq/components/dropdown';
+import * as i1$1 from '@koobiq/components/icon';
+import { KbqIconModule } from '@koobiq/components/icon';
+import * as i7 from '@koobiq/components/loader-overlay';
+import { KbqLoaderOverlayModule } from '@koobiq/components/loader-overlay';
+import * as i2 from '@koobiq/components/scrollbar';
+import { KbqScrollbar, KbqScrollbarModule } from '@koobiq/components/scrollbar';
+import * as i6 from '@koobiq/components/tooltip';
+import { KbqTooltipTrigger, KbqToolTipModule } from '@koobiq/components/tooltip';
+import { combineLatestWith, BehaviorSubject, merge } from 'rxjs';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import { KbqToastService } from '@koobiq/components/toast';
+import { map, filter } from 'rxjs/operators';
+import * as i3 from '@koobiq/components/title';
+import { KbqTitleModule } from '@koobiq/components/title';
+import { FocusTrapFactory, ConfigurableFocusTrapFactory, FOCUS_TRAP_INERT_STRATEGY } from '@angular/cdk/a11y';
+
+/** @docs-private */
+const KbqNotificationCenterAnimations = {
+    /** Animation that transitions a tooltip in and out. */
+    state: trigger('state', [
+        state('initial', style({
+            opacity: 0,
+            transform: 'scale(1, 0.8)'
+        })),
+        transition('* => visible', animate('120ms cubic-bezier(0, 0, 0.2, 1)', style({
+            opacity: 1,
+            transform: 'scale(1, 1)'
+        }))),
+        transition('* => hidden', animate(`${KbqAnimationDurations.Rapid} linear`, style({ opacity: 0 })))
+    ])
+};
+
+const maxUnreadItemsLength = 99;
+class KbqNotificationCenterService {
+    /** Notification items */
+    get items() {
+        return this.originalItems.value;
+    }
+    set items(values) {
+        this.originalItems.next(this.setReadState(this.setIds(values)));
+    }
+    /** Number of unread notifications */
+    get unreadItemsCounter() {
+        return this.originalItems.pipe(map((items) => items.filter((item) => item.read === false).length)).pipe(combineLatestWith(this.onRead), map(([value]) => {
+            if (value < maxUnreadItemsLength) {
+                return value ? value.toString() : '';
+            }
+            else {
+                return `${maxUnreadItemsLength}+`;
+            }
+        }));
+    }
+    /** true if there are no notifications. */
+    get isEmpty() {
+        return this.originalItems.value.length === 0;
+    }
+    constructor() {
+        /** @docs-private */
+        this.adapter = inject(DateAdapter);
+        /** @docs-private */
+        this.formatter = inject(DateFormatter);
+        /** @docs-private */
+        this.toastService = inject(KbqToastService);
+        /** @docs-private */
+        this.silentMode = new BehaviorSubject(false);
+        /** @docs-private */
+        this.loadingMode = new BehaviorSubject(false);
+        /** @docs-private */
+        this.errorMode = new BehaviorSubject(false);
+        /** @docs-private */
+        this.onRead = new BehaviorSubject(null);
+        /** Triggers an event when the user presses the reload button. */
+        this.onReload = new EventEmitter();
+        this.originalItems = new BehaviorSubject([]);
+        /** @docs-private */
+        this.groupedItems = this.originalItems.pipe(map((items) => {
+            const result = {};
+            items.map((item) => this.makeGroup(item, result));
+            return Object.values(result).reverse();
+        }));
+        /** Emits an event whenever the changes. */
+        this.changes = merge(this.silentMode, this.loadingMode, this.errorMode, this.originalItems, this.onRead);
+        this.makeGroup = (item, groups) => {
+            const parsedDate = this.adapter.parse(item.date, '');
+            const groupId = this.adapter.format(parsedDate, 'yyyyMMdd');
+            const groupTitle = this.formatter.absoluteLongDate(parsedDate);
+            if (groups[groupId]) {
+                groups[groupId].items.unshift(item);
+            }
+            else {
+                groups[groupId] = {
+                    title: groupTitle,
+                    items: [item]
+                };
+            }
+        };
+        this.toastService?.read.pipe(takeUntilDestroyed()).subscribe((toastData) => {
+            const item = this.items.find((item) => item.id === toastData?.id);
+            if (item && !item.read) {
+                item.read = true;
+                this.onRead.next(toastData);
+            }
+        });
+    }
+    /** Set silent mode */
+    setSilentMode(value) {
+        this.silentMode.next(value);
+    }
+    /** Set loading mode */
+    setLoadingMode(value) {
+        this.loadingMode.next(value);
+    }
+    /** Set error mode */
+    setErrorMode(value) {
+        this.errorMode.next(value);
+    }
+    /** Push new notification item in center */
+    push(item) {
+        this.setReadState(this.setIds([item]));
+        if (!this.silentMode.value) {
+            this.toastService.show(item);
+        }
+        return this.originalItems.next([...this.originalItems.value, item]);
+    }
+    /** Remove notification item */
+    remove(removedItem) {
+        this.originalItems.next(this.originalItems.value.filter((item) => removedItem !== item));
+    }
+    /** Remove group of notification items */
+    removeGroup(group) {
+        this.originalItems.next(this.originalItems.value.filter((item) => !group.items.includes(item)));
+    }
+    /** Remove all notification items */
+    removeAll() {
+        this.originalItems.next([]);
+    }
+    setIds(items) {
+        items.forEach((item) => (item.id = item.id ?? new Date().getTime().toString()));
+        return items;
+    }
+    setReadState(items) {
+        items.forEach((item) => (item.read = item.read ?? false));
+        return items;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqNotificationCenterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqNotificationCenterService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqNotificationCenterService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
+let id = 0;
+/** @docs-private */
+class KbqNotificationItemComponent {
+    get style() {
+        return {
+            [`kbq-notification-item_${this.data.style}`]: !!this.data.style
+        };
+    }
+    get data() {
+        return this._data;
+    }
+    set data(value) {
+        this._data = value;
+        this.time = this.adapter.format(this.adapter.parse(value.date, ''), 'HH:mm');
+    }
+    constructor() {
+        this.adapter = inject(DateAdapter);
+        this.service = inject(KbqNotificationCenterService);
+        this.readStateDirective = inject(KbqReadStateDirective, { host: true });
+        this.center = inject(KbqNotificationCenterComponent, { host: true });
+        this.popUpPlacements = PopUpPlacements;
+        this.themePalette = ThemePalette;
+        this.id = id++;
+        this.$implicit = this;
+        this.readStateDirective.read
+            .pipe(filter((value) => value), takeUntilDestroyed())
+            .subscribe(() => {
+            this.data.read = true;
+            this.service.onRead.next(this.data);
+        });
+    }
+    isTemplateRef(value) {
+        return value instanceof TemplateRef;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqNotificationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: KbqNotificationItemComponent, isStandalone: true, selector: "kbq-notification-item", inputs: { data: "data" }, host: { properties: { "class": "style" }, classAttribute: "kbq-notification-item" }, hostDirectives: [{ directive: i1.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-info-circle_16\"\n                        class=\"kbq-notification-item__icon\"\n                        [color]=\"$any(data.style)\"\n                        [ngClass]=\"data.iconClass\"\n                    ></i>\n                }\n                @case ('success') {\n                    <i\n                        kbq-icon=\"kbq-check-circle_16\"\n                        class=\"kbq-notification-item__icon\"\n                        [color]=\"$any(data.style)\"\n                        [ngClass]=\"data.iconClass\"\n                    ></i>\n                }\n                @case ('warning') {\n                    <i\n                        kbq-icon=\"kbq-exclamation-triangle_16\"\n                        class=\"kbq-notification-item__icon\"\n                        [color]=\"$any(data.style)\"\n                        [ngClass]=\"data.iconClass\"\n                    ></i>\n                }\n                @case ('error') {\n                    <i\n                        kbq-icon=\"kbq-exclamation-triangle_16\"\n                        class=\"kbq-notification-item__icon\"\n                        [color]=\"$any(data.style)\"\n                        [ngClass]=\"data.iconClass\"\n                    ></i>\n                }\n            }\n        } @else if (isTemplateRef(data.icon)) {\n            <ng-container [ngTemplateOutlet]=\"$any(data.icon)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n        }\n    </div>\n}\n\n<div class=\"kbq-notification-item__container\">\n    @if (data.title) {\n        <div\n            kbq-title\n            class=\"kbq-notification-item__title\"\n            [class.kbq-notification-item__title_with-content]=\"data.caption || data.content\"\n        >\n            @if (isTemplateRef(data.title)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.title)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            }\n            @if (!isTemplateRef(data.title)) {\n                <p>{{ data.title }}</p>\n            }\n\n            <div class=\"kbq-notification-item-time\" [class.kbq-notification-item-time_read]=\"data.read\">\n                <div class=\"kbq-notification-item-time__value\">{{ time }}</div>\n                <i class=\"kbq-notification-item-time__state\" kbq-icon=\"kbq-circle-xs_16\" [color]=\"'theme'\"></i>\n            </div>\n        </div>\n    }\n\n    @if (data.caption) {\n        <div\n            kbq-title\n            [class.kbq-notification-item__text]=\"data.title\"\n            [class.kbq-notification-item__title]=\"!data.title\"\n        >\n            @if (isTemplateRef(data.caption)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.caption)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            }\n            @if (!isTemplateRef(data.caption)) {\n                {{ data.caption }}\n            }\n        </div>\n    }\n\n    @if (data.content) {\n        <div class=\"kbq-notification-item__content\">\n            @if (isTemplateRef(data.content)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.content)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            }\n            @if (!isTemplateRef(data.content)) {\n                {{ data.content }}\n            }\n        </div>\n    }\n\n    @if (data.actions) {\n        <div class=\"kbq-notification-item__actions\">\n            @if (isTemplateRef(data.actions)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.actions)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            }\n            @if (!isTemplateRef(data.actions)) {\n                {{ data.actions }}\n            }\n        </div>\n    }\n</div>\n\n<button\n    kbq-button\n    class=\"kbq-notification-item__remove-button\"\n    [kbqStyle]=\"'transparent'\"\n    [color]=\"'contrast'\"\n    [kbqTooltipArrow]=\"false\"\n    [kbqTooltip]=\"center.localeData.remove\"\n    [kbqPlacement]=\"popUpPlacements.Right\"\n    (click)=\"service.remove(data)\"\n>\n    <i kbq-icon=\"kbq-trash_16\"></i>\n</button>\n", styles: [".kbq-notification-item{display:flex;box-sizing:border-box;position:relative;border-radius:var(--kbq-size-s);height:auto;margin-left:var(--kbq-size-m);margin-right:var(--kbq-size-m)}.kbq-notification-item:hover .kbq-notification-item-time{visibility:hidden}.kbq-notification-item:hover .kbq-notification-item__remove-button{display:block}.kbq-notification-item__icon-container{flex-shrink:0;width:var(--kbq-size-l);max-width:var(--kbq-size-l);height:var(--kbq-size-l);max-height:var(--kbq-size-l);margin-right:var(--kbq-size-s);padding-left:var(--kbq-size-m);padding-top:14px}.kbq-notification-item__container{display:flex;flex-direction:column;flex:1;padding-top:var(--kbq-size-m);padding-right:var(--kbq-size-l);padding-bottom:var(--kbq-size-m);overflow:hidden}.kbq-notification-item__title{display:flex;flex-direction:row;justify-content:space-between;overflow:hidden;text-overflow:ellipsis}.kbq-notification-item__title>p{margin:0;overflow:hidden;text-overflow:ellipsis}.kbq-notification-item__title.kbq-notification-item__title_with-content{margin-bottom:var(--kbq-size-xxs)}.kbq-notification-item-time{display:flex;flex-direction:row;height:var(--kbq-size-xl);align-items:center;padding-left:22px}.kbq-notification-item-time .kbq-notification-item-time__value{margin-right:var(--kbq-size-3xs)}.kbq-notification-item-time.kbq-notification-item-time_read .kbq-notification-item-time__state{display:none}.kbq-notification-item__text{display:flex;flex:1;align-items:center}.kbq-notification-item__content{display:flex;flex-direction:column;white-space:pre-wrap}.kbq-notification-item__actions{display:flex;padding-top:var(--kbq-size-s);gap:var(--kbq-size-m)}.kbq-notification-item__remove-button{position:absolute;top:var(--kbq-size-xs);right:var(--kbq-size-s);display:none}.kbq-notification-item{background:var(--kbq-background-card)}.kbq-notification-item .kbq-notification-item__title{color:var(--kbq-foreground-contrast)}.kbq-notification-item .kbq-notification-item__text,.kbq-notification-item .kbq-notification-item-time.kbq-notification-item-time_read .kbq-notification-item-time__value{color:var(--kbq-foreground-contrast-secondary)}.kbq-notification-item:hover{background:var(--kbq-states-background-transparent-hover)}.kbq-notification-item{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-notification-item .kbq-notification-item-time{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i1$1.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: i3.KbqTitleDirective, selector: "[kbq-title]", exportAs: ["kbqTitle"] }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i3$1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i3$1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "directive", type: KbqTooltipTrigger, selector: "[kbqTooltip]", inputs: ["hideWithTimeout", "kbqVisible", "kbqPlacement", "kbqRelativeToPointer", "kbqPlacementPriority", "kbqTooltip", "kbqTooltipDisabled", "kbqEnterDelay", "kbqLeaveDelay", "kbqTrigger", "kbqTooltipClass", "kbqTooltipContext", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipOffset"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqNotificationItemComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [
+                        NgTemplateOutlet,
+                        KbqIconModule,
+                        NgClass,
+                        KbqTitleModule,
+                        KbqButtonModule,
+                        KbqTooltipTrigger
+                    ], selector: 'kbq-notification-item', host: {
+                        class: 'kbq-notification-item',
+                        '[class]': 'style'
+                    }, hostDirectives: [KbqReadStateDirective], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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-info-circle_16\"\n                        class=\"kbq-notification-item__icon\"\n                        [color]=\"$any(data.style)\"\n                        [ngClass]=\"data.iconClass\"\n                    ></i>\n                }\n                @case ('success') {\n                    <i\n                        kbq-icon=\"kbq-check-circle_16\"\n                        class=\"kbq-notification-item__icon\"\n                        [color]=\"$any(data.style)\"\n                        [ngClass]=\"data.iconClass\"\n                    ></i>\n                }\n                @case ('warning') {\n                    <i\n                        kbq-icon=\"kbq-exclamation-triangle_16\"\n                        class=\"kbq-notification-item__icon\"\n                        [color]=\"$any(data.style)\"\n                        [ngClass]=\"data.iconClass\"\n                    ></i>\n                }\n                @case ('error') {\n                    <i\n                        kbq-icon=\"kbq-exclamation-triangle_16\"\n                        class=\"kbq-notification-item__icon\"\n                        [color]=\"$any(data.style)\"\n                        [ngClass]=\"data.iconClass\"\n                    ></i>\n                }\n            }\n        } @else if (isTemplateRef(data.icon)) {\n            <ng-container [ngTemplateOutlet]=\"$any(data.icon)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n        }\n    </div>\n}\n\n<div class=\"kbq-notification-item__container\">\n    @if (data.title) {\n        <div\n            kbq-title\n            class=\"kbq-notification-item__title\"\n            [class.kbq-notification-item__title_with-content]=\"data.caption || data.content\"\n        >\n            @if (isTemplateRef(data.title)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.title)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            }\n            @if (!isTemplateRef(data.title)) {\n                <p>{{ data.title }}</p>\n            }\n\n            <div class=\"kbq-notification-item-time\" [class.kbq-notification-item-time_read]=\"data.read\">\n                <div class=\"kbq-notification-item-time__value\">{{ time }}</div>\n                <i class=\"kbq-notification-item-time__state\" kbq-icon=\"kbq-circle-xs_16\" [color]=\"'theme'\"></i>\n            </div>\n        </div>\n    }\n\n    @if (data.caption) {\n        <div\n            kbq-title\n            [class.kbq-notification-item__text]=\"data.title\"\n            [class.kbq-notification-item__title]=\"!data.title\"\n        >\n            @if (isTemplateRef(data.caption)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.caption)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            }\n            @if (!isTemplateRef(data.caption)) {\n                {{ data.caption }}\n            }\n        </div>\n    }\n\n    @if (data.content) {\n        <div class=\"kbq-notification-item__content\">\n            @if (isTemplateRef(data.content)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.content)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            }\n            @if (!isTemplateRef(data.content)) {\n                {{ data.content }}\n            }\n        </div>\n    }\n\n    @if (data.actions) {\n        <div class=\"kbq-notification-item__actions\">\n            @if (isTemplateRef(data.actions)) {\n                <ng-container [ngTemplateOutlet]=\"$any(data.actions)\" [ngTemplateOutletContext]=\"{ $implicit }\" />\n            }\n            @if (!isTemplateRef(data.actions)) {\n                {{ data.actions }}\n            }\n        </div>\n    }\n</div>\n\n<button\n    kbq-button\n    class=\"kbq-notification-item__remove-button\"\n    [kbqStyle]=\"'transparent'\"\n    [color]=\"'contrast'\"\n    [kbqTooltipArrow]=\"false\"\n    [kbqTooltip]=\"center.localeData.remove\"\n    [kbqPlacement]=\"popUpPlacements.Right\"\n    (click)=\"service.remove(data)\"\n>\n    <i kbq-icon=\"kbq-trash_16\"></i>\n</button>\n", styles: [".kbq-notification-item{display:flex;box-sizing:border-box;position:relative;border-radius:var(--kbq-size-s);height:auto;margin-left:var(--kbq-size-m);margin-right:var(--kbq-size-m)}.kbq-notification-item:hover .kbq-notification-item-time{visibility:hidden}.kbq-notification-item:hover .kbq-notification-item__remove-button{display:block}.kbq-notification-item__icon-container{flex-shrink:0;width:var(--kbq-size-l);max-width:var(--kbq-size-l);height:var(--kbq-size-l);max-height:var(--kbq-size-l);margin-right:var(--kbq-size-s);padding-left:var(--kbq-size-m);padding-top:14px}.kbq-notification-item__container{display:flex;flex-direction:column;flex:1;padding-top:var(--kbq-size-m);padding-right:var(--kbq-size-l);padding-bottom:var(--kbq-size-m);overflow:hidden}.kbq-notification-item__title{display:flex;flex-direction:row;justify-content:space-between;overflow:hidden;text-overflow:ellipsis}.kbq-notification-item__title>p{margin:0;overflow:hidden;text-overflow:ellipsis}.kbq-notification-item__title.kbq-notification-item__title_with-content{margin-bottom:var(--kbq-size-xxs)}.kbq-notification-item-time{display:flex;flex-direction:row;height:var(--kbq-size-xl);align-items:center;padding-left:22px}.kbq-notification-item-time .kbq-notification-item-time__value{margin-right:var(--kbq-size-3xs)}.kbq-notification-item-time.kbq-notification-item-time_read .kbq-notification-item-time__state{display:none}.kbq-notification-item__text{display:flex;flex:1;align-items:center}.kbq-notification-item__content{display:flex;flex-direction:column;white-space:pre-wrap}.kbq-notification-item__actions{display:flex;padding-top:var(--kbq-size-s);gap:var(--kbq-size-m)}.kbq-notification-item__remove-button{position:absolute;top:var(--kbq-size-xs);right:var(--kbq-size-s);display:none}.kbq-notification-item{background:var(--kbq-background-card)}.kbq-notification-item .kbq-notification-item__title{color:var(--kbq-foreground-contrast)}.kbq-notification-item .kbq-notification-item__text,.kbq-notification-item .kbq-notification-item-time.kbq-notification-item-time_read .kbq-notification-item-time__value{color:var(--kbq-foreground-contrast-secondary)}.kbq-notification-item:hover{background:var(--kbq-states-background-transparent-hover)}.kbq-notification-item{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-notification-item .kbq-notification-item-time{font-size:var(--kbq-typography-text-compact-font-size);font-style:var(--kbq-typography-text-compact-font-style);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { data: [{
+                type: Input
+            }] } });
+
+const defaultOffsetX = 8;
+/**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');
+/** @docs-private */
+function kbqNotificationCenterScrollStrategyFactory(overlay) {
+    return () => overlay.scrollStrategies.reposition({ scrollThrottle: 20 });
+}
+/** @docs-private */
+const KBQ_NOTIFICATION_CENTER_SCROLL_STRATEGY_FACTORY_PROVIDER = {
+    provide: KBQ_NOTIFICATION_CENTER_SCROLL_STRATEGY,
+    deps: [Overlay],
+    useFactory: kbqNotificationCenterScrollStrategyFactory
+};
+/** @docs-private */
+class KbqNotificationCenterComponent extends KbqPopUp {
+    /** localized data
+     * @docs-private */
+    get localeData() {
+        return this.configuration;
+    }
+    get popoverHeight() {
+        return this._popoverHeight;
+    }
+    set popoverHeight(value) {
+        this._popoverHeight = value;
+        this.elementRef.nativeElement.style.height = value;
+    }
+    constructor() {
+        super();
+        /** @docs-private */
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        /** @docs-private */
+        this.localeService = inject(KBQ_LOCALE_SERVICE, { optional: true });
+        /** @docs-private */
+        this.dateAdapter = inject(DateAdapter);
+        /** @docs-private */
+        this.service = inject(KbqNotificationCenterService);
+        this.externalConfiguration = inject(KBQ_NOTIFICATION_CENTER_CONFIGURATION, { optional: true });
+        /** @docs-private */
+        this.isTopOverflow = false;
+        /** @docs-private */
+        this.isBottomOverflow = false;
+        /** @docs-private */
+        this.prefix = 'kbq-notification-center';
+        /** @docs-private */
+        this.isTrapFocus = false;
+        this.checkOverflow = () => {
+            const nativeElement = this.scrollContainer.contentElement.nativeElement;
+            const { scrollTop, offsetHeight, scrollHeight } = nativeElement;
+            this.isTopOverflow = scrollTop > 0;
+            this.isBottomOverflow = scrollTop + offsetHeight < scrollHeight;
+            this.changeDetectorRef.markForCheck();
+        };
+        this.updateLocaleParams = () => {
+            this.configuration = this.externalConfiguration || this.localeService?.getParams('notificationCenter');
+            this.changeDetectorRef.markForCheck();
+        };
+        this.localeService?.changes.pipe(takeUntilDestroyed()).subscribe(this.updateLocaleParams);
+        if (!this.localeService) {
+            this.initDefaultParams();
+        }
+    }
+    ngAfterViewInit() {
+        this.visibleChange.subscribe((state) => {
+            if (this.offset !== null && state) {
+                applyPopupMargins(this.renderer, this.elementRef.nativeElement, this.prefix, `${this.offset.toString()}px`);
+            }
+        });
+        this.service.changes.subscribe(() => this.changeDetectorRef.markForCheck());
+        this.switcher.focus();
+        setTimeout(this.checkOverflow);
+    }
+    /** @docs-private */
+    updateClassMap(placement, customClass, size) {
+        super.updateClassMap(placement, customClass, { [`${this.prefix}_${size}`]: !!size });
+    }
+    /** @docs-private */
+    updateTrapFocus(isTrapFocus) {
+        this.isTrapFocus = isTrapFocus;
+    }
+    /** @docs-private */
+    escapeHandler() {
+        this.hide(0);
+    }
+    initDefaultParams() {
+        this.configuration = KBQ_NOTIFICATION_CENTER_DEFAULT_CONFIGURATION;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqNotificationCenterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: KbqNotificationCenterComponent, isStandalone: true, selector: "kbq-notification-center", host: { listeners: { "keydown.escape": "escapeHandler()" }, properties: { "class.kbq-notification-center_popover": "popoverMode" }, classAttribute: "kbq-notification-center" }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: KbqScrollbar, descendants: true }, { propertyName: "switcher", first: true, predicate: ["notificationSwitcher"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"kbq-notification-center-header\">\n    <div class=\"kbq-notification-center-title\">\n        <div class=\"kbq-notification-center-title__text\">{{ localeData.notifications }}</div>\n        <button\n            #notificationSwitcher\n            #dropdownTrigger=\"kbqDropdownTrigger\"\n            kbq-button\n            class=\"kbq-notification-center-title__button\"\n            [kbqDropdownTriggerFor]=\"notificationSwitcherDropdown\"\n            [kbqTooltip]=\"service.silentMode.value ? localeData.doNotDisturb : localeData.showPopUpNotifications\"\n            [kbqTooltipArrow]=\"false\"\n            [kbqTooltipOffset]=\"4\"\n            [kbqTooltipDisabled]=\"dropdownTrigger.opened\"\n            [kbqStyle]=\"'transparent'\"\n            [color]=\"'contrast'\"\n        >\n            <i kbq-icon=\"{{ service.silentMode.value ? 'kbq-bell-slash_16' : 'kbq-bell_16' }}\"></i>\n        </button>\n    </div>\n    <div class=\"kbq-notification-center-toolbar\">\n        @if (!service.isEmpty) {\n            <button\n                kbq-button\n                class=\"kbq-notification-center-toolbar__button\"\n                [kbqStyle]=\"'transparent'\"\n                [color]=\"'contrast'\"\n                (click)=\"service.removeAll()\"\n            >\n                <i kbq-icon=\"kbq-trash_16\"></i>\n            </button>\n\n            <kbq-divider [vertical]=\"true\" />\n        }\n\n        <button\n            kbq-button\n            class=\"kbq-notification-center-toolbar__button\"\n            [kbqStyle]=\"'transparent'\"\n            [color]=\"'contrast'\"\n            (click)=\"hide(0)\"\n        >\n            <i kbq-icon=\"kbq-xmark_16\"></i>\n        </button>\n    </div>\n</div>\n\n<div\n    kbq-scrollbar\n    class=\"kbq-notification-center-container\"\n    [class.kbq-notification-center_bottom-overflow]=\"isBottomOverflow\"\n    (onScroll)=\"checkOverflow()\"\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                    [class.kbq-notification-center_top-overflow]=\"isTopOverflow\"\n                >\n                    <div class=\"kbq-notification-center-sub-header__date\">{{ group.title }}</div>\n\n                    <button\n                        kbq-button\n                        class=\"kbq-notification-center-sub-header__button\"\n                        [kbqStyle]=\"'transparent'\"\n                        [color]=\"'contrast'\"\n                        [kbqTooltip]=\"localeData.remove\"\n                        [kbqTooltipArrow]=\"false\"\n                        (click)=\"service.removeGroup(group)\"\n                    >\n                        <i kbq-icon=\"kbq-trash_16\"></i>\n                    </button>\n                </div>\n\n                @for (item of group.items; track item) {\n                    <kbq-notification-item [data]=\"item\" />\n                }\n            } @empty {\n                <div class=\"kbq-notification-center-empty-container\">\n                    <i kbq-icon-item=\"kbq-bell_16\" [big]=\"true\" [color]=\"'contrast-fade'\"></i>\n                    {{ localeData.noNotifications }}\n                </div>\n            }\n        } @else {\n            <kbq-loader-overlay [transparent]=\"true\" />\n        }\n    } @else {\n        <div class=\"kbq-notification-center-error-container\">\n            <i kbq-icon-item=\"kbq-bell_16\" [big]=\"true\" [color]=\"'error'\" [fade]=\"true\"></i>\n            {{ localeData.failedToLoadNotifications }}\n            <button kbq-button [kbqStyle]=\"'transparent'\" [color]=\"'theme'\" (click)=\"service.onReload.emit()\">\n                {{ localeData.repeat }}\n            </button>\n        </div>\n    }\n</div>\n\n<kbq-dropdown #notificationSwitcherDropdown=\"kbqDropdown\">\n    <button kbq-dropdown-item (click)=\"service.setSilentMode(false)\">\n        <i kbq-icon=\"{{ !service.silentMode.value ? 'kbq-circle-xs_16' : '' }}\" [style.min-width.px]=\"16\"></i>\n        {{ localeData.showPopUpNotifications }}\n    </button>\n    <button kbq-dropdown-item (click)=\"service.setSilentMode(true)\">\n        <i kbq-icon=\"{{ service.silentMode.value ? 'kbq-circle-xs_16' : '' }}\" [style.min-width.px]=\"16\"></i>\n        {{ localeData.doNotDisturb }}\n    </button>\n</kbq-dropdown>\n", styles: [".kbq-notification-center{position:relative;display:flex;flex-direction:column;width:400px;height:100vh;box-sizing:border-box;z-index:1}.kbq-notification-center:not(.kbq-notification-center_popover){border-right:1px solid;border-left:1px solid}.kbq-notification-center.kbq-notification-center_popover{margin-top:var(--kbq-size-xxs);margin-bottom:var(--kbq-size-xxs);border-radius:var(--kbq-size-xs);height:calc(100vh - 48px);box-shadow:var(--kbq-shadow-popup)}.kbq-notification-center-header{display:flex;flex-direction:row;justify-content:space-between;padding:var(--kbq-size-xl) var(--kbq-size-xl) var(--kbq-size-xxs) var(--kbq-size-xxl)}.kbq-notification-center-title{display:flex;flex-direction:row;align-items:center;gap:var(--kbq-size-xxs)}.kbq-notification-center-toolbar{display:flex;flex-direction:row;align-items:center}.kbq-notification-center-toolbar .kbq-divider.kbq-divider_vertical{height:var(--kbq-size-m)}.kbq-notification-center-sub-header{position:sticky;top:0;z-index:100;display:flex;flex-direction:row;padding:var(--kbq-size-s) var(--kbq-size-xxl)}.kbq-notification-center-sub-header .kbq-notification-center-sub-header__button{position:absolute;top:0;right:var(--kbq-size-xl);display:none}.kbq-notification-center-sub-header:hover .kbq-notification-center-sub-header__button{display:flex}.kbq-notification-center-sub-header:first-child.kbq-notification-center_top-overflow{box-shadow:var(--kbq-shadow-overflow-normal-bottom)}.kbq-notification-center-container{height:100%;border-radius:inherit;padding-bottom:var(--kbq-size-m)}.kbq-notification-center-container .kbq-loader-overlay_parent{border-radius:inherit}.kbq-notification-center-container.kbq-notification-center_bottom-overflow{box-shadow:var(--kbq-shadow-overflow-normal-bottom)}.kbq-notification-center-empty-container,.kbq-notification-center-error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}.kbq-notification-center-empty-container .kbq-icon,.kbq-notification-center-error-container .kbq-icon{margin-bottom:var(--kbq-size-xl)}.kbq-notification-center-empty-container .kbq-button,.kbq-notification-center-error-container .kbq-button{margin-top:var(--kbq-size-s)}.kbq-notification-center,.kbq-notification-center-sub-header{background:var(--kbq-background-card)}.kbq-notification-center:not(.kbq-notification-center_popover),.kbq-notification-center-sub-header:not(.kbq-notification-center_popover){border-right-color:var(--kbq-line-contrast-less);border-left-color:var(--kbq-line-contrast-less)}.kbq-notification-center-error-container{color:var(--kbq-foreground-error)}.kbq-notification-center{font-size:var(--kbq-typography-text-normal-medium-font-size);font-style:var(--kbq-typography-text-normal-medium-font-style);font-weight:var(--kbq-typography-text-normal-medium-font-weight);line-height:var(--kbq-typography-text-normal-medium-line-height);font-family:var(--kbq-typography-text-normal-medium-font-family);text-transform:var(--kbq-typography-text-normal-medium-text-transform);font-feature-settings:var(--kbq-typography-text-normal-medium-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-medium-letter-spacing)}.kbq-notification-center-title__text{font-size:var(--kbq-typography-text-big-strong-font-size);font-style:var(--kbq-typography-text-big-strong-font-style);font-weight:var(--kbq-typography-text-big-strong-font-weight);line-height:var(--kbq-typography-text-big-strong-line-height);font-family:var(--kbq-typography-text-big-strong-font-family);text-transform:var(--kbq-typography-text-big-strong-text-transform);font-feature-settings:var(--kbq-typography-text-big-strong-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-strong-letter-spacing)}\n"], dependencies: [{ kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i1$1.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "component", type: i1$1.KbqIconItem, selector: "[kbq-icon-item]", inputs: ["kbq-icon-item", "fade", "big"] }, { kind: "ngmodule", type: KbqBadgeModule }, { kind: "ngmodule", type: KbqScrollbarModule }, { kind: "component", type: i2.KbqScrollbar, selector: "kbq-scrollbar, [kbq-scrollbar]", inputs: ["initializationTarget", "options", "events", "defer"], outputs: ["onInitialize", "onUpdate", "onDestroy", "onScroll"], exportAs: ["kbqScrollbar"] }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i3$1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i3$1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "directive", type: i3$1.KbqButtonDropdownTrigger, selector: "[kbq-button][kbqDropdownTriggerFor]" }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "component", type: i4.KbqDivider, selector: "kbq-divider", inputs: ["vertical", "inset", "paddings"] }, { kind: "ngmodule", type: KbqDropdownModule }, { kind: "component", type: i5.KbqDropdown, selector: "kbq-dropdown", inputs: ["navigationWithWrap", "xPosition", "yPosition", "overlapTriggerY", "overlapTriggerX", "hasBackdrop", "class", "backdropClass"], outputs: ["closed"], exportAs: ["kbqDropdown"] }, { kind: "component", type: i5.KbqDropdownItem, selector: "kbq-dropdown-item, [kbq-dropdown-item]", inputs: ["disabled"], exportAs: ["kbqDropdownItem"] }, { kind: "directive", type: i5.KbqDropdownTrigger, selector: "[kbqDropdownTriggerFor]", inputs: ["offsetX", "offsetY", "kbqDropdownTriggerData", "openByArrowDown", "kbqDropdownTriggerRestoreFocus", "kbqDropdownTriggerFor"], outputs: ["dropdownOpened", "dropdownClosed"], exportAs: ["kbqDropdownTrigger"] }, { kind: "ngmodule", type: KbqToolTipModule }, { kind: "directive", type: i6.KbqTooltipTrigger, selector: "[kbqTooltip]", inputs: ["hideWithTimeout", "kbqVisible", "kbqPlacement", "kbqRelativeToPointer", "kbqPlacementPriority", "kbqTooltip", "kbqTooltipDisabled", "kbqEnterDelay", "kbqLeaveDelay", "kbqTrigger", "kbqTooltipClass", "kbqTooltipContext", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipOffset"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: KbqNotificationItemComponent, selector: "kbq-notification-item", inputs: ["data"] }, { kind: "ngmodule", type: KbqLoaderOverlayModule }, { kind: "component", type: i7.KbqLoaderOverlay, selector: "kbq-loader-overlay", inputs: ["text", "caption", "size", "transparent"] }], animations: [KbqNotificationCenterAnimations.state], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqNotificationCenterComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'kbq-notification-center', preserveWhitespaces: false, host: {
+                        class: 'kbq-notification-center',
+                        '[class.kbq-notification-center_popover]': 'popoverMode',
+                        '(keydown.escape)': 'escapeHandler()'
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        KbqIconModule,
+                        KbqBadgeModule,
+                        KbqScrollbarModule,
+                        KbqButtonModule,
+                        KbqDividerModule,
+                        KbqDropdownModule,
+                        KbqToolTipModule,
+                        AsyncPipe,
+                        KbqNotificationItemComponent,
+                        KbqLoaderOverlayModule
+                    ], animations: [KbqNotificationCenterAnimations.state], template: "<div class=\"kbq-notification-center-header\">\n    <div class=\"kbq-notification-center-title\">\n        <div class=\"kbq-notification-center-title__text\">{{ localeData.notifications }}</div>\n        <button\n            #notificationSwitcher\n            #dropdownTrigger=\"kbqDropdownTrigger\"\n            kbq-button\n            class=\"kbq-notification-center-title__button\"\n            [kbqDropdownTriggerFor]=\"notificationSwitcherDropdown\"\n            [kbqTooltip]=\"service.silentMode.value ? localeData.doNotDisturb : localeData.showPopUpNotifications\"\n            [kbqTooltipArrow]=\"false\"\n            [kbqTooltipOffset]=\"4\"\n            [kbqTooltipDisabled]=\"dropdownTrigger.opened\"\n            [kbqStyle]=\"'transparent'\"\n            [color]=\"'contrast'\"\n        >\n            <i kbq-icon=\"{{ service.silentMode.value ? 'kbq-bell-slash_16' : 'kbq-bell_16' }}\"></i>\n        </button>\n    </div>\n    <div class=\"kbq-notification-center-toolbar\">\n        @if (!service.isEmpty) {\n            <button\n                kbq-button\n                class=\"kbq-notification-center-toolbar__button\"\n                [kbqStyle]=\"'transparent'\"\n                [color]=\"'contrast'\"\n                (click)=\"service.removeAll()\"\n            >\n                <i kbq-icon=\"kbq-trash_16\"></i>\n            </button>\n\n            <kbq-divider [vertical]=\"true\" />\n        }\n\n        <button\n            kbq-button\n            class=\"kbq-notification-center-toolbar__button\"\n            [kbqStyle]=\"'transparent'\"\n            [color]=\"'contrast'\"\n            (click)=\"hide(0)\"\n        >\n            <i kbq-icon=\"kbq-xmark_16\"></i>\n        </button>\n    </div>\n</div>\n\n<div\n    kbq-scrollbar\n    class=\"kbq-notification-center-container\"\n    [class.kbq-notification-center_bottom-overflow]=\"isBottomOverflow\"\n    (onScroll)=\"checkOverflow()\"\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                    [class.kbq-notification-center_top-overflow]=\"isTopOverflow\"\n                >\n                    <div class=\"kbq-notification-center-sub-header__date\">{{ group.title }}</div>\n\n                    <button\n                        kbq-button\n                        class=\"kbq-notification-center-sub-header__button\"\n                        [kbqStyle]=\"'transparent'\"\n                        [color]=\"'contrast'\"\n                        [kbqTooltip]=\"localeData.remove\"\n                        [kbqTooltipArrow]=\"false\"\n                        (click)=\"service.removeGroup(group)\"\n                    >\n                        <i kbq-icon=\"kbq-trash_16\"></i>\n                    </button>\n                </div>\n\n                @for (item of group.items; track item) {\n                    <kbq-notification-item [data]=\"item\" />\n                }\n            } @empty {\n                <div class=\"kbq-notification-center-empty-container\">\n                    <i kbq-icon-item=\"kbq-bell_16\" [big]=\"true\" [color]=\"'contrast-fade'\"></i>\n                    {{ localeData.noNotifications }}\n                </div>\n            }\n        } @else {\n            <kbq-loader-overlay [transparent]=\"true\" />\n        }\n    } @else {\n        <div class=\"kbq-notification-center-error-container\">\n            <i kbq-icon-item=\"kbq-bell_16\" [big]=\"true\" [color]=\"'error'\" [fade]=\"true\"></i>\n            {{ localeData.failedToLoadNotifications }}\n            <button kbq-button [kbqStyle]=\"'transparent'\" [color]=\"'theme'\" (click)=\"service.onReload.emit()\">\n                {{ localeData.repeat }}\n            </button>\n        </div>\n    }\n</div>\n\n<kbq-dropdown #notificationSwitcherDropdown=\"kbqDropdown\">\n    <button kbq-dropdown-item (click)=\"service.setSilentMode(false)\">\n        <i kbq-icon=\"{{ !service.silentMode.value ? 'kbq-circle-xs_16' : '' }}\" [style.min-width.px]=\"16\"></i>\n        {{ localeData.showPopUpNotifications }}\n    </button>\n    <button kbq-dropdown-item (click)=\"service.setSilentMode(true)\">\n        <i kbq-icon=\"{{ service.silentMode.value ? 'kbq-circle-xs_16' : '' }}\" [style.min-width.px]=\"16\"></i>\n        {{ localeData.doNotDisturb }}\n    </button>\n</kbq-dropdown>\n", styles: [".kbq-notification-center{position:relative;display:flex;flex-direction:column;width:400px;height:100vh;box-sizing:border-box;z-index:1}.kbq-notification-center:not(.kbq-notification-center_popover){border-right:1px solid;border-left:1px solid}.kbq-notification-center.kbq-notification-center_popover{margin-top:var(--kbq-size-xxs);margin-bottom:var(--kbq-size-xxs);border-radius:var(--kbq-size-xs);height:calc(100vh - 48px);box-shadow:var(--kbq-shadow-popup)}.kbq-notification-center-header{display:flex;flex-direction:row;justify-content:space-between;padding:var(--kbq-size-xl) var(--kbq-size-xl) var(--kbq-size-xxs) var(--kbq-size-xxl)}.kbq-notification-center-title{display:flex;flex-direction:row;align-items:center;gap:var(--kbq-size-xxs)}.kbq-notification-center-toolbar{display:flex;flex-direction:row;align-items:center}.kbq-notification-center-toolbar .kbq-divider.kbq-divider_vertical{height:var(--kbq-size-m)}.kbq-notification-center-sub-header{position:sticky;top:0;z-index:100;display:flex;flex-direction:row;padding:var(--kbq-size-s) var(--kbq-size-xxl)}.kbq-notification-center-sub-header .kbq-notification-center-sub-header__button{position:absolute;top:0;right:var(--kbq-size-xl);display:none}.kbq-notification-center-sub-header:hover .kbq-notification-center-sub-header__button{display:flex}.kbq-notification-center-sub-header:first-child.kbq-notification-center_top-overflow{box-shadow:var(--kbq-shadow-overflow-normal-bottom)}.kbq-notification-center-container{height:100%;border-radius:inherit;padding-bottom:var(--kbq-size-m)}.kbq-notification-center-container .kbq-loader-overlay_parent{border-radius:inherit}.kbq-notification-center-container.kbq-notification-center_bottom-overflow{box-shadow:var(--kbq-shadow-overflow-normal-bottom)}.kbq-notification-center-empty-container,.kbq-notification-center-error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}.kbq-notification-center-empty-container .kbq-icon,.kbq-notification-center-error-container .kbq-icon{margin-bottom:var(--kbq-size-xl)}.kbq-notification-center-empty-container .kbq-button,.kbq-notification-center-error-container .kbq-button{margin-top:var(--kbq-size-s)}.kbq-notification-center,.kbq-notification-center-sub-header{background:var(--kbq-background-card)}.kbq-notification-center:not(.kbq-notification-center_popover),.kbq-notification-center-sub-header:not(.kbq-notification-center_popover){border-right-color:var(--kbq-line-contrast-less);border-left-color:var(--kbq-line-contrast-less)}.kbq-notification-center-error-container{color:var(--kbq-foreground-error)}.kbq-notification-center{font-size:var(--kbq-typography-text-normal-medium-font-size);font-style:var(--kbq-typography-text-normal-medium-font-style);font-weight:var(--kbq-typography-text-normal-medium-font-weight);line-height:var(--kbq-typography-text-normal-medium-line-height);font-family:var(--kbq-typography-text-normal-medium-font-family);text-transform:var(--kbq-typography-text-normal-medium-text-transform);font-feature-settings:var(--kbq-typography-text-normal-medium-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-medium-letter-spacing)}.kbq-notification-center-title__text{font-size:var(--kbq-typography-text-big-strong-font-size);font-style:var(--kbq-typography-text-big-strong-font-style);font-weight:var(--kbq-typography-text-big-strong-font-weight);line-height:var(--kbq-typography-text-big-strong-line-height);font-family:var(--kbq-typography-text-big-strong-font-family);text-transform:var(--kbq-typography-text-big-strong-text-transform);font-feature-settings:var(--kbq-typography-text-big-strong-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-strong-letter-spacing)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { scrollContainer: [{
+                type: ViewChild,
+                args: [KbqScrollbar]
+            }], switcher: [{
+                type: ViewChild,
+                args: ['notificationSwitcher']
+            }] } });
+class KbqNotificationCenterTrigger extends KbqPopUpTrigger {
+    /** Number of unread notifications */
+    get unreadItemsCounter() {
+        return this.service.unreadItemsCounter;
+    }
+    /** Use popover or not */
+    get popoverMode() {
+        return this._popoverMode;
+    }
+    set popoverMode(value) {
+        this._popoverMode = value;
+        this.placement = PopUpPlacements.Bottom;
+        this.updatePlacementPriority(['bottomCenter', 'bottomLeft', 'bottomRight']);
+    }
+    /** Set height of popover. Default is calc(100vh - 48px). 48px - height of navbar */
+    get popoverHeight() {
+        return this._popoverHeight;
+    }
+    set popoverHeight(value) {
+        this._popoverHeight = value;
+        if (this.instance?.popoverHeight) {
+            this.instance.popoverHeight = value;
+        }
+    }
+    /** Whether the trigger is disabled. */
+    get disabled() {
+        return this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = coerceBooleanProperty(value);
+        if (this._disabled) {
+            this.hide();
+        }
+    }
+    /** @docs-private */
+    get hasClickTrigger() {
+        return this.trigger.includes(PopUpTriggers.Click);
+    }
+    /** @docs-private */
+    get overlayConfig() {
+        const defaultPanelClass = 'kbq-notification-center__panel';
+        return {
+            panelClass: this.panelClass ? [defaultPanelClass, this.panelClass] : defaultPanelClass,
+            hasBackdrop: this.hasBackdrop,
+            backdropClass: this.backdropClass
+        };
+    }
+    constructor() {
+        super();
+        /** @docs-private */
+        this.scrollStrategy = inject(KBQ_NOTIFICATION_CENTER_SCROLL_STRATEGY);
+        /** @docs-private */
+        this.service = inject(KbqNotificationCenterService);
+        // not used
+        /** @docs-private */
+        this.arrow = false;
+        /** @docs-private */
+        this.hasBackdrop = false;
+        /** @docs-private */
+        this.size = PopUpSizes.Medium;
+        /** Placement of popUp */
+        this.placement = PopUpPlacements.Right;
+        /** Class that will be used in the background */
+        this.backdropClass = 'cdk-overlay-transparent-backdrop';
+        /** Offset of popUp */
+        this.offset = defaultOffsetX;
+        this._popoverMode = false;
+        /** Emits a change event whenever the placement state changes. */
+        this.placementChange = new EventEmitter();
+        /** Emits a change event whenever the visible state changes. */
+        this.visibleChange = new EventEmitter();
+        /** @docs-private */
+        this.trigger = `${PopUpTriggers.Click}, ${PopUpTriggers.Keydown}`;
+        /** @docs-private */
+        this.originSelector = '.kbq-notification-center';
+        this.hideIfNotInViewPort = () => {
+            if (!this.scrollable)
+                return;
+            const rect = this.elementRef.nativeElement.getBoundingClientRect();
+            const containerRect = this.scrollable.getElementRef().nativeElement.getBoundingClientRect();
+            if (!(rect.bottom >= containerRect.top &&
+                rect.right >= containerRect.left &&
+                rect.top <= containerRect.bottom &&
+                rect.left <= containerRect.right)) {
+                this.hide();
+            }
+        };
+        this.updatePlacementPriority(['right', 'rightBottom', 'rightTop']);
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.scrollable
+            ?.elementScrolled()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(this.hideIfNotInViewPort);
+    }
+    ngAfterContentInit() {
+        if (this.closeOnScroll === null) {
+            this.scrollDispatcher.scrolled().subscribe((scrollable) => {
+                if (!scrollable?.getElementRef().nativeElement.classList.contains('kbq-hide-nested-popup'))
+                    return;
+                const parentRects = scrollable.getElementRef().nativeElement.getBoundingClientRect();
+                const childRects = this.elementRef.nativeElement.getBoundingClientRect();
+                if (childRects.bottom < parentRects.top || childRects.top > parentRects.bottom) {
+                    this.hide();
+                }
+            });
+        }
+        this.visibleChange.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((visible) => {
+            if (visible) {
+                // eslint-disable-next-line rxjs/no-nested-subscribe
+                this.preventClosingByInnerScrollSubscription = this.closingActions().subscribe((event) => {
+                    if (event['scrollDispatcher']) {
+                        event['kbqPopoverPreventHide'] = true;
+                        event['type'] = 'click';
+                    }
+                });
+            }
+            else {
+                this.preventClosingByInnerScrollSubscription.unsubscribe();
+                this.focus();
+            }
+        });
+    }
+    /** @docs-private */
+    updateData() {
+        if (!this.instance)
+            return;
+        this.instance.header = this.header;
+        this.instance.content = this.content;
+        this.instance.arrow = this.arrow;
+        this.instance.offset = this.offset;
+        this.instance.footer = this.footer;
+        this.instance.popoverMode = this.popoverMode;
+        this.instance.popoverHeight = this.popoverHeight;
+        this.instance.updateTrapFocus(this.trigger !== PopUpTriggers.Focus);
+        if (this.isOpen) {
+            this.updatePosition(true);
+        }
+    }
+    /** Updates the current position.
+     *
+     * @docs-private */
+    updatePosition(reapplyPosition = false) {
+        this.overlayRef = this.createOverlay();
+        const position = this.overlayRef.getConfig().positionStrategy
+            .withPositions(this.getAdjustedPositions())
+            .withPush(true);
+        if (reapplyPosition) {
+            setTimeout(() => position.reapplyLastPosition());
+        }
+    }
+    /** @docs-private */
+    getOverlayHandleComponentType() {
+        return KbqNotificationCenterComponent;
+    }
+    /** @docs-private */
+    updateClassMap(newPlacement = this.placement) {
+        if (!this.instance)
+            return;
+        this.instance.updateClassMap(POSITION_TO_CSS_MAP[newPlacement], this.customClass, this.size);
+        this.instance.markForCheck();
+    }
+    /** @docs-private */
+    closingActions() {
+        return merge(this.overlayRef.outsidePointerEvents(), this.overlayRef.backdropClick(), this.scrollDispatcher.scrolled());
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqNotificationCenterTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.14", type: KbqNotificationCenterTrigger, isStandalone: true, selector: "[kbqNotificationCenterTrigger]", inputs: { placement: ["kbqNotificationCenterPlacement", "placement"], backdropClass: "backdropClass", panelClass: ["kbqNotificationCenterPanelClass", "panelClass"], offset: ["offset", "offset", numberAttribute], popoverMode: ["popoverMode", "popoverMode", booleanAttribute], popoverHeight: "popoverHeight", disabled: ["disabled", "disabled", booleanAttribute] }, 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: "18.2.14", ngImport: i0, type: KbqNotificationCenterTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[kbqNotificationCenterTrigger]',
+                    exportAs: 'kbqNotificationCenterTrigger',
+                    host: {
+                        '[class.kbq-notification-center_open]': 'isOpen',
+                        '[class.kbq-active]': 'hasClickTrigger && isOpen'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { placement: [{
+                type: Input,
+                args: ['kbqNotificationCenterPlacement']
+            }], backdropClass: [{
+                type: Input
+            }], panelClass: [{
+                type: Input,
+                args: ['kbqNotificationCenterPanelClass']
+            }], offset: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], popoverMode: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], popoverHeight: [{
+                type: Input
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], placementChange: [{
+                type: Output,
+                args: ['kbqPlacementChange']
+            }], visibleChange: [{
+                type: Output,
+                args: ['kbqVisibleChange']
+            }] } });
+
+class KbqNotificationCenterModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqNotificationCenterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: KbqNotificationCenterModule, imports: [KbqNotificationCenterComponent,
+            KbqNotificationCenterTrigger], exports: [KbqNotificationCenterComponent,
+            KbqNotificationCenterTrigger] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqNotificationCenterModule, providers: [
+            KBQ_NOTIFICATION_CENTER_SCROLL_STRATEGY_FACTORY_PROVIDER,
+            { provide: FocusTrapFactory, useClass: ConfigurableFocusTrapFactory },
+            { provide: FOCUS_TRAP_INERT_STRATEGY, useClass: EmptyFocusTrapStrategy },
+            { provide: KbqNotificationCenterService, deps: [DateAdapter, DateFormatter] }
+        ], imports: [KbqNotificationCenterComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqNotificationCenterModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        KbqNotificationCenterComponent,
+                        KbqNotificationCenterTrigger
+                    ],
+                    exports: [
+                        KbqNotificationCenterComponent,
+                        KbqNotificationCenterTrigger
+                    ],
+                    providers: [
+                        KBQ_NOTIFICATION_CENTER_SCROLL_STRATEGY_FACTORY_PROVIDER,
+                        { provide: FocusTrapFactory, useClass: ConfigurableFocusTrapFactory },
+                        { provide: FOCUS_TRAP_INERT_STRATEGY, useClass: EmptyFocusTrapStrategy },
+                        { provide: KbqNotificationCenterService, deps: [DateAdapter, DateFormatter] }
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { KBQ_NOTIFICATION_CENTER_CONFIGURATION, KBQ_NOTIFICATION_CENTER_DEFAULT_CONFIGURATION, KBQ_NOTIFICATION_CENTER_SCROLL_STRATEGY, KBQ_NOTIFICATION_CENTER_SCROLL_STRATEGY_FACTORY_PROVIDER, KbqNotificationCenterAnimations, KbqNotificationCenterComponent, KbqNotificationCenterModule, KbqNotificationCenterService, KbqNotificationCenterTrigger, kbqNotificationCenterScrollStrategyFactory, maxUnreadItemsLength };
+//# sourceMappingURL=koobiq-components-notification-center.mjs.map