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.setStickPosition();
        });
        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.updatePlacementPriority(['right', 'rightBottom', 'rightTop']);
    }
    ngAfterContentInit() {
        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 && event['scrollDispatcher']) {
                        this.instance.setStickPosition();
                        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], 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: "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 }]
            }], stickToWindow: [{
                type: Input
            }], container: [{
                type: Input
            }], 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
