@koobiq/components 20.4.2 → 20.4.4

package/fesm2022/koobiq-components-dl.mjs

@@ -2,7 +2,7 @@ import { Platform, PlatformModule } from '@angular/cdk/platform';
 import * as i0 from '@angular/core';
 import { input, inject, ElementRef, ChangeDetectorRef, Input, ViewEncapsulation, Component, NgModule } from '@angular/core';
 import { Subject, Subscription } from 'rxjs';
-import { startWith, debounceTime } from 'rxjs/operators';
+import { debounceTime } from 'rxjs/operators';
 import { A11yModule } from '@angular/cdk/a11y';
 
 class KbqDlComponent {
@@ -24,8 +24,9 @@ class KbqDlComponent {
         this.platform = inject(Platform);
         this.updateState = () => {
             const domRect = this.elementRef.nativeElement.getClientRects()[0];
-            const width = domRect?.width || 0;
-            this.vertical = width <= this.minWidth();
+            if (!domRect)
+                return;
+            this.vertical = domRect.width <= this.minWidth();
             this.changeDetectorRef.markForCheck();
         };
     }
@@ -33,8 +34,9 @@ class KbqDlComponent {
         if (this.vertical !== null || !this.platform.isBrowser) {
             return;
         }
+        this.updateState();
         this.resizeSubscription = this.resizeStream
-            .pipe(startWith(null), debounceTime(this.resizeDebounceInterval))
+            .pipe(debounceTime(this.resizeDebounceInterval))
             .subscribe(this.updateState);
     }
     ngOnDestroy() {

package/fesm2022/koobiq-components-dl.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"koobiq-components-dl.mjs","sources":["../../../packages/components/dl/dl.component.ts","../../../packages/components/dl/dl.module.ts","../../../packages/components/dl/koobiq-components-dl.ts"],"sourcesContent":["import { Platform } from '@angular/cdk/platform';\nimport {\n    AfterContentInit,\n    ChangeDetectorRef,\n    Component,\n    ElementRef,\n    inject,\n    Input,\n    input,\n    OnDestroy,\n    ViewEncapsulation\n} from '@angular/core';\nimport { Subject, Subscription } from 'rxjs';\nimport { debounceTime, startWith } from 'rxjs/operators';\n\n/** Supported alignment values for description list items. */\nexport type KbqDlAlign = 'start' | 'center' | 'end';\n\n@Component({\n    selector: 'kbq-dl',\n    template: '<ng-content />',\n    styleUrls: ['dl.scss', 'dl-tokens.scss'],\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        class: 'kbq-dl',\n        '[class.kbq-dl_vertical]': 'vertical',\n        '[class.kbq-dl_wide]': 'wide()',\n        '[class.kbq-dl_vertical-align-center]': \"verticalAlign() === 'center'\",\n        '[class.kbq-dl_vertical-align-end]': \"verticalAlign() === 'end'\",\n        '[class.kbq-dl_horizontal-align-center]': \"horizontalAlign() === 'center'\",\n        '[class.kbq-dl_horizontal-align-end]': \"horizontalAlign() === 'end'\",\n        '(window:resize)': 'resizeStream.next($event)'\n    }\n})\nexport class KbqDlComponent implements AfterContentInit, OnDestroy {\n    readonly minWidth = input<number>(400);\n    readonly wide = input(false);\n    /** Vertical alignment of `kbq-dt` and `kbq-dd` items. */\n    readonly verticalAlign = input<KbqDlAlign>('start');\n    /** Horizontal alignment of `kbq-dt` and `kbq-dd` items. */\n    readonly horizontalAlign = input<KbqDlAlign>('start');\n    // TODO: Skipped for migration because:\n    //  Your application code writes to the input. This prevents migration.\n    @Input() vertical: boolean | null = null;\n\n    readonly resizeStream = new Subject<Event>();\n    private readonly resizeDebounceInterval: number = 100;\n\n    private resizeSubscription = Subscription.EMPTY;\n\n    private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n    private readonly changeDetectorRef = inject(ChangeDetectorRef);\n    private readonly platform = inject(Platform);\n\n    ngAfterContentInit(): void {\n        if (this.vertical !== null || !this.platform.isBrowser) {\n            return;\n        }\n\n        this.resizeSubscription = this.resizeStream\n            .pipe(startWith(null), debounceTime(this.resizeDebounceInterval))\n            .subscribe(this.updateState);\n    }\n\n    ngOnDestroy() {\n        this.resizeSubscription.unsubscribe();\n    }\n\n    private readonly updateState = (): void => {\n        const domRect = this.elementRef.nativeElement.getClientRects()[0];\n        const width = domRect?.width || 0;\n\n        this.vertical = width <= this.minWidth();\n\n        this.changeDetectorRef.markForCheck();\n    };\n}\n\n@Component({\n    selector: 'kbq-dt',\n    template: '<ng-content />',\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        class: 'kbq-dt'\n    }\n})\nexport class KbqDtComponent {}\n\n@Component({\n    selector: 'kbq-dd',\n    template: '<ng-content />',\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        class: 'kbq-dd'\n    }\n})\nexport class KbqDdComponent {}\n","import { A11yModule } from '@angular/cdk/a11y';\nimport { PlatformModule } from '@angular/cdk/platform';\nimport { NgModule } from '@angular/core';\nimport { KbqDdComponent, KbqDlComponent, KbqDtComponent } from './dl.component';\n\n@NgModule({\n    imports: [\n        A11yModule,\n        PlatformModule,\n        KbqDlComponent,\n        KbqDtComponent,\n        KbqDdComponent\n    ],\n    exports: [\n        KbqDlComponent,\n        KbqDtComponent,\n        KbqDdComponent\n    ]\n})\nexport class KbqDlModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"koobiq-components-dl.mjs","sources":["../../../packages/components/dl/dl.component.ts","../../../packages/components/dl/dl.module.ts","../../../packages/components/dl/koobiq-components-dl.ts"],"sourcesContent":["import { Platform } from '@angular/cdk/platform';\nimport {\n    AfterContentInit,\n    ChangeDetectorRef,\n    Component,\n    ElementRef,\n    inject,\n    Input,\n    input,\n    OnDestroy,\n    ViewEncapsulation\n} from '@angular/core';\nimport { Subject, Subscription } from 'rxjs';\nimport { debounceTime } from 'rxjs/operators';\n\n/** Supported alignment values for description list items. */\nexport type KbqDlAlign = 'start' | 'center' | 'end';\n\n@Component({\n    selector: 'kbq-dl',\n    template: '<ng-content />',\n    styleUrls: ['dl.scss', 'dl-tokens.scss'],\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        class: 'kbq-dl',\n        '[class.kbq-dl_vertical]': 'vertical',\n        '[class.kbq-dl_wide]': 'wide()',\n        '[class.kbq-dl_vertical-align-center]': \"verticalAlign() === 'center'\",\n        '[class.kbq-dl_vertical-align-end]': \"verticalAlign() === 'end'\",\n        '[class.kbq-dl_horizontal-align-center]': \"horizontalAlign() === 'center'\",\n        '[class.kbq-dl_horizontal-align-end]': \"horizontalAlign() === 'end'\",\n        '(window:resize)': 'resizeStream.next($event)'\n    }\n})\nexport class KbqDlComponent implements AfterContentInit, OnDestroy {\n    readonly minWidth = input<number>(400);\n    readonly wide = input(false);\n    /** Vertical alignment of `kbq-dt` and `kbq-dd` items. */\n    readonly verticalAlign = input<KbqDlAlign>('start');\n    /** Horizontal alignment of `kbq-dt` and `kbq-dd` items. */\n    readonly horizontalAlign = input<KbqDlAlign>('start');\n    // TODO: Skipped for migration because:\n    //  Your application code writes to the input. This prevents migration.\n    @Input() vertical: boolean | null = null;\n\n    readonly resizeStream = new Subject<Event>();\n    private readonly resizeDebounceInterval: number = 100;\n\n    private resizeSubscription = Subscription.EMPTY;\n\n    private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n    private readonly changeDetectorRef = inject(ChangeDetectorRef);\n    private readonly platform = inject(Platform);\n\n    ngAfterContentInit(): void {\n        if (this.vertical !== null || !this.platform.isBrowser) {\n            return;\n        }\n\n        this.updateState();\n\n        this.resizeSubscription = this.resizeStream\n            .pipe(debounceTime(this.resizeDebounceInterval))\n            .subscribe(this.updateState);\n    }\n\n    ngOnDestroy() {\n        this.resizeSubscription.unsubscribe();\n    }\n\n    private readonly updateState = (): void => {\n        const domRect = this.elementRef.nativeElement.getClientRects()[0];\n\n        if (!domRect) return;\n\n        this.vertical = domRect.width <= this.minWidth();\n\n        this.changeDetectorRef.markForCheck();\n    };\n}\n\n@Component({\n    selector: 'kbq-dt',\n    template: '<ng-content />',\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        class: 'kbq-dt'\n    }\n})\nexport class KbqDtComponent {}\n\n@Component({\n    selector: 'kbq-dd',\n    template: '<ng-content />',\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        class: 'kbq-dd'\n    }\n})\nexport class KbqDdComponent {}\n","import { A11yModule } from '@angular/cdk/a11y';\nimport { PlatformModule } from '@angular/cdk/platform';\nimport { NgModule } from '@angular/core';\nimport { KbqDdComponent, KbqDlComponent, KbqDtComponent } from './dl.component';\n\n@NgModule({\n    imports: [\n        A11yModule,\n        PlatformModule,\n        KbqDlComponent,\n        KbqDtComponent,\n        KbqDdComponent\n    ],\n    exports: [\n        KbqDlComponent,\n        KbqDtComponent,\n        KbqDdComponent\n    ]\n})\nexport class KbqDlModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -472,7 +472,7 @@ class KbqNotificationCenterComponent extends KbqPopUp {
         this.configuration = KBQ_NOTIFICATION_CENTER_DEFAULT_CONFIGURATION;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNotificationCenterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqNotificationCenterComponent, isStandalone: true, selector: "kbq-notification-center", host: { listeners: { "keydown.escape": "escapeHandler()" }, properties: { "class.kbq-notification-center_popover": "popoverMode" }, classAttribute: "kbq-notification-center" }, viewQueries: [{ propertyName: "switcher", first: true, predicate: ["notificationSwitcher"], descendants: true, isSignal: true }, { propertyName: "scrollContainer", first: true, predicate: KbqScrollbar, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"kbq-notification-center-header\">\n    <div class=\"kbq-notification-center-title\">\n        <div class=\"kbq-notification-center-title__text\">{{ localeData.notifications }}</div>\n        <button\n            #notificationSwitcher\n            kbq-button\n            class=\"kbq-notification-center-title__button\"\n            data-testid=\"kbq-notification-center-silent-mode-toggle\"\n            [kbqDropdownTriggerFor]=\"notificationSwitcherDropdown\"\n            [kbqTooltip]=\"service.silentMode.value ? localeData.doNotDisturb : localeData.showPopUpNotifications\"\n            [kbqTooltipArrow]=\"false\"\n            [kbqPlacement]=\"'right'\"\n            [kbqTooltipOffset]=\"4\"\n            [kbqStyle]=\"'transparent'\"\n            [color]=\"'contrast'\"\n        >\n            <i kbq-icon=\"{{ service.silentMode.value ? 'kbq-bell-slash_16' : 'kbq-bell_16' }}\"></i>\n        </button>\n    </div>\n    <div class=\"kbq-notification-center-toolbar\">\n        @if (!service.isEmpty) {\n            <button\n                kbq-button\n                class=\"kbq-notification-center-toolbar__button\"\n                data-testid=\"kbq-notification-center-remove-all-button\"\n                [kbqStyle]=\"'transparent'\"\n                [color]=\"'contrast'\"\n                (click)=\"service.removeAll()\"\n            >\n                <i kbq-icon=\"kbq-trash_16\"></i>\n            </button>\n\n            <kbq-divider [vertical]=\"true\" />\n        }\n\n        <button\n            kbq-button\n            class=\"kbq-notification-center-toolbar__button\"\n            data-testid=\"kbq-notification-center-close-button\"\n            [kbqStyle]=\"'transparent'\"\n            [color]=\"'contrast'\"\n            (click)=\"hide(0)\"\n        >\n            <i kbq-icon=\"kbq-xmark_16\"></i>\n        </button>\n    </div>\n</div>\n\n<div\n    #notificationCenterContainer=\"kbqOverflowShadowContainer\"\n    kbq-scrollbar\n    kbqOverflowShadowContainer\n    class=\"kbq-notification-center-container\"\n    data-testid=\"kbq-notification-center-container\"\n    [kbqOverflowShadowBottom]=\"notificationCenterContainer\"\n    [shadow]=\"'var(--kbq-shadow-overflow-normal-bottom)'\"\n    (onScroll)=\"onContainerScroll()\"\n>\n    @if (!service.errorMode.value) {\n        @if (!service.loadingMode.value) {\n            @for (group of service.groupedItems | async; track group) {\n                <div\n                    class=\"kbq-notification-center-sub-header\"\n                    data-testid=\"kbq-notification-center-group\"\n                    [kbqOverflowShadowTop]=\"$first ? notificationCenterContainer : undefined\"\n                >\n                    <div class=\"kbq-notification-center-sub-header__date\">{{ group.title }}</div>\n\n                    <button\n                        kbq-button\n                        class=\"kbq-notification-center-sub-header__button\"\n                        data-testid=\"kbq-notification-center-remove-group-button\"\n                        [kbqStyle]=\"'transparent'\"\n                        [color]=\"'contrast'\"\n                        [kbqTooltip]=\"localeData.remove\"\n                        [kbqPlacement]=\"'right'\"\n                        [kbqTooltipArrow]=\"false\"\n                        (click)=\"service.removeGroup(group)\"\n                    >\n                        <i kbq-icon=\"kbq-trash_16\"></i>\n                    </button>\n                </div>\n\n                @for (item of group.items; track item) {\n                    <kbq-notification-item [data]=\"item\" />\n                }\n            } @empty {\n                @if (!service.loadingMore.value) {\n                    <div class=\"kbq-notification-center-empty-container\" data-testid=\"kbq-notification-center-empty\">\n                        <i kbq-icon-item=\"kbq-bell_16\" [big]=\"true\" [color]=\"'contrast-fade'\"></i>\n                        {{ localeData.noNotifications }}\n                    </div>\n                }\n            }\n\n            @if (service.loadingMore.value) {\n                <div\n                    class=\"kbq-notification-center-load-more\"\n                    data-testid=\"kbq-notification-center-load-more\"\n                    role=\"status\"\n                    [attr.aria-label]=\"localeData.loadingMore\"\n                >\n                    <kbq-progress-spinner [mode]=\"'indeterminate'\" [size]=\"'compact'\" />\n                </div>\n            }\n\n            @if (service.loadMoreErrorMode.value) {\n                <div\n                    class=\"kbq-notification-center-load-more-error\"\n                    data-testid=\"kbq-notification-center-load-more-error\"\n                    role=\"alert\"\n                >\n                    {{ localeData.failedToLoadNotifications }}\n                    <button\n                        kbq-button\n                        data-testid=\"kbq-notification-center-load-more-retry-button\"\n                        [kbqStyle]=\"'transparent'\"\n                        [color]=\"'theme'\"\n                        (click)=\"retryLoadMore()\"\n                    >\n                        {{ localeData.repeat }}\n                    </button>\n                </div>\n            }\n        } @else {\n            <kbq-loader-overlay data-testid=\"kbq-notification-center-loader\" [transparent]=\"true\" />\n        }\n    } @else {\n        <div class=\"kbq-notification-center-error-container\" data-testid=\"kbq-notification-center-error\">\n            <i kbq-icon-item=\"kbq-bell_16\" [big]=\"true\" [color]=\"'error'\" [fade]=\"true\"></i>\n            {{ localeData.failedToLoadNotifications }}\n            <button\n                kbq-button\n                data-testid=\"kbq-notification-center-reload-button\"\n                [kbqStyle]=\"'transparent'\"\n                [color]=\"'theme'\"\n                (click)=\"service.onReload.emit()\"\n            >\n                {{ localeData.repeat }}\n            </button>\n        </div>\n    }\n</div>\n\n<kbq-dropdown #notificationSwitcherDropdown=\"kbqDropdown\">\n    <button\n        kbq-dropdown-item\n        data-testid=\"kbq-notification-center-show-notifications-button\"\n        (click)=\"service.setSilentMode(false)\"\n    >\n        <i kbq-icon=\"{{ !service.silentMode.value ? 'kbq-circle-xs_16' : '' }}\" [style.min-width.px]=\"16\"></i>\n        {{ localeData.showPopUpNotifications }}\n    </button>\n    <button\n        kbq-dropdown-item\n        data-testid=\"kbq-notification-center-do-not-disturb-button\"\n        (click)=\"service.setSilentMode(true)\"\n    >\n        <i kbq-icon=\"{{ service.silentMode.value ? 'kbq-circle-xs_16' : '' }}\" [style.min-width.px]=\"16\"></i>\n        {{ localeData.doNotDisturb }}\n    </button>\n</kbq-dropdown>\n", styles: [".kbq-notification-center{position:relative;display:flex;flex-direction:column;width:400px;height:100vh;box-sizing:border-box;z-index:1}.kbq-notification-center:not(.kbq-notification-center_popover){border-right:1px solid;border-left:1px solid}.kbq-notification-center.kbq-notification-center_popover{margin-top:var(--kbq-size-xxs);margin-bottom:var(--kbq-size-xxs);border-radius:var(--kbq-size-xs);height:calc(100vh - 48px);box-shadow:var(--kbq-shadow-popup)}.kbq-notification-center-header{display:flex;flex-direction:row;justify-content:space-between;padding:var(--kbq-size-m) var(--kbq-size-xl) var(--kbq-size-xxs) var(--kbq-size-xxl)}.kbq-notification-center-title{display:flex;flex-direction:row;align-items:center;gap:var(--kbq-size-xxs)}.kbq-notification-center-toolbar{display:flex;flex-direction:row;align-items:center}.kbq-notification-center-toolbar .kbq-divider.kbq-divider_vertical{height:var(--kbq-size-m)}.kbq-notification-center-sub-header{position:sticky;top:0;z-index:100;display:flex;flex-direction:row;padding:var(--kbq-size-s) var(--kbq-size-xl)}.kbq-notification-center-sub-header .kbq-notification-center-sub-header__button{position:absolute;top:0;right:var(--kbq-size-xl);display:none}.kbq-notification-center-sub-header:hover .kbq-notification-center-sub-header__button,.kbq-notification-center-sub-header:focus-within .kbq-notification-center-sub-header__button{display:flex}.kbq-notification-center-container{height:100%;border-radius:inherit;padding-bottom:var(--kbq-size-xl)}.kbq-notification-center-container [data-overlayscrollbars-viewport]{scroll-behavior:smooth}@media(prefers-reduced-motion:reduce){.kbq-notification-center-container [data-overlayscrollbars-viewport]{scroll-behavior:auto}}.kbq-notification-center-container .kbq-loader-overlay_parent{border-radius:inherit}.kbq-notification-center-load-more{display:flex;align-items:center;justify-content:center;padding:26px 0}.kbq-notification-center-load-more-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--kbq-size-xxs) var(--kbq-size-xxl);text-align:center}.kbq-notification-center-load-more-error .kbq-button{margin-top:var(--kbq-size-s)}.kbq-notification-center-empty-container,.kbq-notification-center-error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}.kbq-notification-center-empty-container .kbq-icon,.kbq-notification-center-error-container .kbq-icon{margin-bottom:var(--kbq-size-xl)}.kbq-notification-center-empty-container .kbq-button,.kbq-notification-center-error-container .kbq-button{margin-top:var(--kbq-size-s)}.kbq-notification-center,.kbq-notification-center-sub-header{background:var(--kbq-background-card)}.kbq-notification-center:not(.kbq-notification-center_popover),.kbq-notification-center-sub-header:not(.kbq-notification-center_popover){border-right-color:var(--kbq-line-contrast-less);border-left-color:var(--kbq-line-contrast-less)}.kbq-notification-center-error-container,.kbq-notification-center-load-more-error{color:var(--kbq-foreground-error)}.kbq-notification-center{font-size:var(--kbq-typography-text-normal-medium-font-size);font-style:var(--kbq-typography-text-normal-medium-font-style);font-weight:var(--kbq-typography-text-normal-medium-font-weight);line-height:var(--kbq-typography-text-normal-medium-line-height);font-family:var(--kbq-typography-text-normal-medium-font-family);text-transform:var(--kbq-typography-text-normal-medium-text-transform);font-feature-settings:var(--kbq-typography-text-normal-medium-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-medium-letter-spacing)}.kbq-notification-center-title__text{font-size:var(--kbq-typography-text-big-strong-font-size);font-style:var(--kbq-typography-text-big-strong-font-style);font-weight:var(--kbq-typography-text-big-strong-font-weight);line-height:var(--kbq-typography-text-big-strong-line-height);font-family:var(--kbq-typography-text-big-strong-font-family);text-transform:var(--kbq-typography-text-big-strong-text-transform);font-feature-settings:var(--kbq-typography-text-big-strong-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-strong-letter-spacing)}\n"], dependencies: [{ kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i1.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "component", type: i1.KbqIconItem, selector: "[kbq-icon-item]", inputs: ["kbq-icon-item", "fade", "big"] }, { kind: "ngmodule", type: KbqBadgeModule }, { kind: "ngmodule", type: KbqScrollbarModule }, { kind: "component", type: i2.KbqScrollbar, selector: "kbq-scrollbar, [kbq-scrollbar]", inputs: ["initializationTarget", "options", "events", "defer"], outputs: ["onInitialize", "onUpdate", "onDestroy", "onScroll"], exportAs: ["kbqScrollbar"] }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i3$1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i3$1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "directive", type: i3$1.KbqButtonDropdownTrigger, selector: "[kbq-button][kbqDropdownTriggerFor]" }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "component", type: i4.KbqDivider, selector: "kbq-divider", inputs: ["vertical", "paddings"] }, { kind: "ngmodule", type: KbqDropdownModule }, { kind: "component", type: i5.KbqDropdown, selector: "kbq-dropdown", inputs: ["navigationWithWrap", "xPosition", "yPosition", "overlapTriggerY", "overlapTriggerX", "hasBackdrop", "class", "backdropClass", "panelWidth", "panelMinWidth", "panelMaxWidth", "safeArea"], outputs: ["closed"], exportAs: ["kbqDropdown"] }, { kind: "component", type: i5.KbqDropdownItem, selector: "kbq-dropdown-item, [kbq-dropdown-item]", inputs: ["disabled", "progress"], exportAs: ["kbqDropdownItem"] }, { kind: "directive", type: i5.KbqDropdownTrigger, selector: "[kbqDropdownTriggerFor]", inputs: ["offsetX", "offsetY", "kbqDropdownTriggerData", "openByArrowDown", "demoteOverlay", "kbqDropdownTriggerRestoreFocus", "kbqDropdownTriggerFor"], outputs: ["dropdownOpened", "dropdownClosed"], exportAs: ["kbqDropdownTrigger"] }, { kind: "ngmodule", type: KbqToolTipModule }, { kind: "directive", type: i6.KbqTooltipTrigger, selector: "[kbqTooltip]", inputs: ["kbqTooltipScrollStrategy", "forDisabledComponent", "ignoreTooltipPointerEvents", "kbqTooltipSingleInstance", "hideWithTimeout", "kbqVisible", "kbqPlacement", "kbqRelativeToPointer", "kbqPlacementPriority", "kbqTooltip", "kbqTooltipDisabled", "kbqEnterDelay", "kbqLeaveDelay", "kbqTrigger", "kbqTooltipClass", "kbqTooltipContext", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipOffset", "kbqTooltipModifier", "kbqTooltipHeader"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }, { kind: "component", type: KbqNotificationItemComponent, selector: "kbq-notification-item", inputs: ["data"] }, { kind: "ngmodule", type: KbqLoaderOverlayModule }, { kind: "component", type: i7.KbqLoaderOverlay, selector: "kbq-loader-overlay", inputs: ["text", "caption", "size", "transparent", "card"] }, { kind: "ngmodule", type: KbqProgressSpinnerModule }, { kind: "component", type: i8.KbqProgressSpinner, selector: "kbq-progress-spinner", inputs: ["id", "value", "mode", "size"] }, { kind: "directive", type: KbqOverflowShadowContainer, selector: "[kbqOverflowShadowContainer]", inputs: ["debounce"], exportAs: ["kbqOverflowShadowContainer"] }, { kind: "directive", type: KbqOverflowShadowTop, selector: "[kbqOverflowShadowTop]", inputs: ["kbqOverflowShadowTop", "shadow"], exportAs: ["kbqOverflowShadowTop"] }, { kind: "directive", type: KbqOverflowShadowBottom, selector: "[kbqOverflowShadowBottom]", inputs: ["kbqOverflowShadowBottom", "shadow"], exportAs: ["kbqOverflowShadowBottom"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [KbqNotificationCenterAnimations.state], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqNotificationCenterComponent, isStandalone: true, selector: "kbq-notification-center", host: { listeners: { "keydown.escape": "escapeHandler()" }, properties: { "class.kbq-notification-center_popover": "popoverMode" }, classAttribute: "kbq-notification-center" }, viewQueries: [{ propertyName: "switcher", first: true, predicate: ["notificationSwitcher"], descendants: true, isSignal: true }, { propertyName: "scrollContainer", first: true, predicate: KbqScrollbar, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"kbq-notification-center-header\">\n    <div class=\"kbq-notification-center-title\">\n        <div class=\"kbq-notification-center-title__text\">{{ localeData.notifications }}</div>\n        <button\n            #notificationSwitcher\n            kbq-button\n            class=\"kbq-notification-center-title__button\"\n            data-testid=\"kbq-notification-center-silent-mode-toggle\"\n            [kbqDropdownTriggerFor]=\"notificationSwitcherDropdown\"\n            [kbqTooltip]=\"service.silentMode.value ? localeData.doNotDisturb : localeData.showPopUpNotifications\"\n            [kbqTooltipArrow]=\"false\"\n            [kbqPlacement]=\"'right'\"\n            [kbqTooltipOffset]=\"4\"\n            [kbqStyle]=\"'transparent'\"\n            [color]=\"'contrast'\"\n        >\n            <i kbq-icon=\"{{ service.silentMode.value ? 'kbq-bell-slash_16' : 'kbq-bell_16' }}\"></i>\n        </button>\n    </div>\n    <div class=\"kbq-notification-center-toolbar\">\n        @if (!service.isEmpty) {\n            <button\n                kbq-button\n                class=\"kbq-notification-center-toolbar__button\"\n                data-testid=\"kbq-notification-center-remove-all-button\"\n                [kbqStyle]=\"'transparent'\"\n                [color]=\"'contrast'\"\n                (click)=\"service.removeAll()\"\n            >\n                <i kbq-icon=\"kbq-trash_16\"></i>\n            </button>\n\n            <kbq-divider [vertical]=\"true\" />\n        }\n\n        <button\n            kbq-button\n            class=\"kbq-notification-center-toolbar__button\"\n            data-testid=\"kbq-notification-center-close-button\"\n            [kbqStyle]=\"'transparent'\"\n            [color]=\"'contrast'\"\n            (click)=\"hide(0)\"\n        >\n            <i kbq-icon=\"kbq-xmark_16\"></i>\n        </button>\n    </div>\n</div>\n\n<div\n    #notificationCenterContainer=\"kbqOverflowShadowContainer\"\n    kbq-scrollbar\n    kbqOverflowShadowContainer\n    class=\"kbq-notification-center-container\"\n    data-testid=\"kbq-notification-center-container\"\n    [kbqOverflowShadowBottom]=\"notificationCenterContainer\"\n    [shadow]=\"'var(--kbq-shadow-overflow-normal-bottom)'\"\n    (onScroll)=\"onContainerScroll()\"\n>\n    @if (!service.errorMode.value) {\n        @if (!service.loadingMode.value) {\n            @for (group of service.groupedItems | async; track group) {\n                <div\n                    class=\"kbq-notification-center-sub-header\"\n                    data-testid=\"kbq-notification-center-group\"\n                    [kbqOverflowShadowTop]=\"$first ? notificationCenterContainer : undefined\"\n                >\n                    <div class=\"kbq-notification-center-sub-header__date\">{{ group.title }}</div>\n\n                    <button\n                        kbq-button\n                        class=\"kbq-notification-center-sub-header__button\"\n                        data-testid=\"kbq-notification-center-remove-group-button\"\n                        [kbqStyle]=\"'transparent'\"\n                        [color]=\"'contrast'\"\n                        [kbqTooltip]=\"localeData.remove\"\n                        [kbqPlacement]=\"'right'\"\n                        [kbqTooltipArrow]=\"false\"\n                        (click)=\"service.removeGroup(group)\"\n                    >\n                        <i kbq-icon=\"kbq-trash_16\"></i>\n                    </button>\n                </div>\n\n                @for (item of group.items; track item) {\n                    <kbq-notification-item [data]=\"item\" />\n                }\n            } @empty {\n                @if (!service.loadingMore.value) {\n                    <div class=\"kbq-notification-center-empty-container\" data-testid=\"kbq-notification-center-empty\">\n                        <i kbq-icon-item=\"kbq-bell_16\" [big]=\"true\" [color]=\"'contrast-fade'\"></i>\n                        {{ localeData.noNotifications }}\n                    </div>\n                }\n            }\n\n            @if (service.loadingMore.value) {\n                <div\n                    class=\"kbq-notification-center-load-more\"\n                    data-testid=\"kbq-notification-center-load-more\"\n                    role=\"status\"\n                    [attr.aria-label]=\"localeData.loadingMore\"\n                >\n                    <kbq-progress-spinner [mode]=\"'indeterminate'\" [size]=\"'compact'\" />\n                </div>\n            }\n\n            @if (service.loadMoreErrorMode.value) {\n                <div\n                    class=\"kbq-notification-center-load-more-error\"\n                    data-testid=\"kbq-notification-center-load-more-error\"\n                    role=\"alert\"\n                >\n                    {{ localeData.failedToLoadNotifications }}\n                    <button\n                        kbq-button\n                        data-testid=\"kbq-notification-center-load-more-retry-button\"\n                        [kbqStyle]=\"'transparent'\"\n                        [color]=\"'theme'\"\n                        (click)=\"retryLoadMore()\"\n                    >\n                        {{ localeData.repeat }}\n                    </button>\n                </div>\n            }\n        } @else {\n            <kbq-loader-overlay data-testid=\"kbq-notification-center-loader\" [card]=\"true\" />\n        }\n    } @else {\n        <div class=\"kbq-notification-center-error-container\" data-testid=\"kbq-notification-center-error\">\n            <i kbq-icon-item=\"kbq-bell_16\" [big]=\"true\" [color]=\"'error'\" [fade]=\"true\"></i>\n            {{ localeData.failedToLoadNotifications }}\n            <button\n                kbq-button\n                data-testid=\"kbq-notification-center-reload-button\"\n                [kbqStyle]=\"'transparent'\"\n                [color]=\"'theme'\"\n                (click)=\"service.onReload.emit()\"\n            >\n                {{ localeData.repeat }}\n            </button>\n        </div>\n    }\n</div>\n\n<kbq-dropdown #notificationSwitcherDropdown=\"kbqDropdown\">\n    <button\n        kbq-dropdown-item\n        data-testid=\"kbq-notification-center-show-notifications-button\"\n        (click)=\"service.setSilentMode(false)\"\n    >\n        <i kbq-icon=\"{{ !service.silentMode.value ? 'kbq-circle-xs_16' : '' }}\" [style.min-width.px]=\"16\"></i>\n        {{ localeData.showPopUpNotifications }}\n    </button>\n    <button\n        kbq-dropdown-item\n        data-testid=\"kbq-notification-center-do-not-disturb-button\"\n        (click)=\"service.setSilentMode(true)\"\n    >\n        <i kbq-icon=\"{{ service.silentMode.value ? 'kbq-circle-xs_16' : '' }}\" [style.min-width.px]=\"16\"></i>\n        {{ localeData.doNotDisturb }}\n    </button>\n</kbq-dropdown>\n", styles: [".kbq-notification-center{position:relative;display:flex;flex-direction:column;width:400px;height:100vh;box-sizing:border-box;z-index:1}.kbq-notification-center:not(.kbq-notification-center_popover){border-right:1px solid;border-left:1px solid}.kbq-notification-center.kbq-notification-center_popover{margin-top:var(--kbq-size-xxs);margin-bottom:var(--kbq-size-xxs);border-radius:var(--kbq-size-xs);height:calc(100vh - 48px);box-shadow:var(--kbq-shadow-popup)}.kbq-notification-center-header{display:flex;flex-direction:row;justify-content:space-between;padding:var(--kbq-size-m) var(--kbq-size-xl) var(--kbq-size-xxs) var(--kbq-size-xxl)}.kbq-notification-center-title{display:flex;flex-direction:row;align-items:center;gap:var(--kbq-size-xxs)}.kbq-notification-center-toolbar{display:flex;flex-direction:row;align-items:center}.kbq-notification-center-toolbar .kbq-divider.kbq-divider_vertical{height:var(--kbq-size-m)}.kbq-notification-center-sub-header{position:sticky;top:0;z-index:100;display:flex;flex-direction:row;padding:var(--kbq-size-s) var(--kbq-size-xl)}.kbq-notification-center-sub-header .kbq-notification-center-sub-header__button{position:absolute;top:0;right:var(--kbq-size-xl);display:none}.kbq-notification-center-sub-header:hover .kbq-notification-center-sub-header__button,.kbq-notification-center-sub-header:focus-within .kbq-notification-center-sub-header__button{display:flex}.kbq-notification-center-container{height:100%;border-radius:inherit;padding-bottom:var(--kbq-size-xl)}.kbq-notification-center-container [data-overlayscrollbars-viewport]{scroll-behavior:smooth}@media(prefers-reduced-motion:reduce){.kbq-notification-center-container [data-overlayscrollbars-viewport]{scroll-behavior:auto}}.kbq-notification-center-container .kbq-loader-overlay_parent{border-radius:inherit}.kbq-notification-center-load-more{display:flex;align-items:center;justify-content:center;padding:26px 0}.kbq-notification-center-load-more-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--kbq-size-xxs) var(--kbq-size-xxl);text-align:center}.kbq-notification-center-load-more-error .kbq-button{margin-top:var(--kbq-size-s)}.kbq-notification-center-empty-container,.kbq-notification-center-error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}.kbq-notification-center-empty-container .kbq-icon,.kbq-notification-center-error-container .kbq-icon{margin-bottom:var(--kbq-size-xl)}.kbq-notification-center-empty-container .kbq-button,.kbq-notification-center-error-container .kbq-button{margin-top:var(--kbq-size-s)}.kbq-notification-center,.kbq-notification-center-sub-header{background:var(--kbq-background-card)}.kbq-notification-center:not(.kbq-notification-center_popover),.kbq-notification-center-sub-header:not(.kbq-notification-center_popover){border-right-color:var(--kbq-line-contrast-less);border-left-color:var(--kbq-line-contrast-less)}.kbq-notification-center-error-container,.kbq-notification-center-load-more-error{color:var(--kbq-foreground-error)}.kbq-notification-center{font-size:var(--kbq-typography-text-normal-medium-font-size);font-style:var(--kbq-typography-text-normal-medium-font-style);font-weight:var(--kbq-typography-text-normal-medium-font-weight);line-height:var(--kbq-typography-text-normal-medium-line-height);font-family:var(--kbq-typography-text-normal-medium-font-family);text-transform:var(--kbq-typography-text-normal-medium-text-transform);font-feature-settings:var(--kbq-typography-text-normal-medium-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-medium-letter-spacing)}.kbq-notification-center-title__text{font-size:var(--kbq-typography-text-big-strong-font-size);font-style:var(--kbq-typography-text-big-strong-font-style);font-weight:var(--kbq-typography-text-big-strong-font-weight);line-height:var(--kbq-typography-text-big-strong-line-height);font-family:var(--kbq-typography-text-big-strong-font-family);text-transform:var(--kbq-typography-text-big-strong-text-transform);font-feature-settings:var(--kbq-typography-text-big-strong-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-strong-letter-spacing)}\n"], dependencies: [{ kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i1.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "component", type: i1.KbqIconItem, selector: "[kbq-icon-item]", inputs: ["kbq-icon-item", "fade", "big"] }, { kind: "ngmodule", type: KbqBadgeModule }, { kind: "ngmodule", type: KbqScrollbarModule }, { kind: "component", type: i2.KbqScrollbar, selector: "kbq-scrollbar, [kbq-scrollbar]", inputs: ["initializationTarget", "options", "events", "defer"], outputs: ["onInitialize", "onUpdate", "onDestroy", "onScroll"], exportAs: ["kbqScrollbar"] }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i3$1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i3$1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "directive", type: i3$1.KbqButtonDropdownTrigger, selector: "[kbq-button][kbqDropdownTriggerFor]" }, { kind: "ngmodule", type: KbqDividerModule }, { kind: "component", type: i4.KbqDivider, selector: "kbq-divider", inputs: ["vertical", "paddings"] }, { kind: "ngmodule", type: KbqDropdownModule }, { kind: "component", type: i5.KbqDropdown, selector: "kbq-dropdown", inputs: ["navigationWithWrap", "xPosition", "yPosition", "overlapTriggerY", "overlapTriggerX", "hasBackdrop", "class", "backdropClass", "panelWidth", "panelMinWidth", "panelMaxWidth", "safeArea"], outputs: ["closed"], exportAs: ["kbqDropdown"] }, { kind: "component", type: i5.KbqDropdownItem, selector: "kbq-dropdown-item, [kbq-dropdown-item]", inputs: ["disabled", "progress"], exportAs: ["kbqDropdownItem"] }, { kind: "directive", type: i5.KbqDropdownTrigger, selector: "[kbqDropdownTriggerFor]", inputs: ["offsetX", "offsetY", "kbqDropdownTriggerData", "openByArrowDown", "demoteOverlay", "kbqDropdownTriggerRestoreFocus", "kbqDropdownTriggerFor"], outputs: ["dropdownOpened", "dropdownClosed"], exportAs: ["kbqDropdownTrigger"] }, { kind: "ngmodule", type: KbqToolTipModule }, { kind: "directive", type: i6.KbqTooltipTrigger, selector: "[kbqTooltip]", inputs: ["kbqTooltipScrollStrategy", "forDisabledComponent", "ignoreTooltipPointerEvents", "kbqTooltipSingleInstance", "hideWithTimeout", "kbqVisible", "kbqPlacement", "kbqRelativeToPointer", "kbqPlacementPriority", "kbqTooltip", "kbqTooltipDisabled", "kbqEnterDelay", "kbqLeaveDelay", "kbqTrigger", "kbqTooltipClass", "kbqTooltipContext", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipOffset", "kbqTooltipModifier", "kbqTooltipHeader"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }, { kind: "component", type: KbqNotificationItemComponent, selector: "kbq-notification-item", inputs: ["data"] }, { kind: "ngmodule", type: KbqLoaderOverlayModule }, { kind: "component", type: i7.KbqLoaderOverlay, selector: "kbq-loader-overlay", inputs: ["text", "caption", "size", "transparent", "card"] }, { kind: "ngmodule", type: KbqProgressSpinnerModule }, { kind: "component", type: i8.KbqProgressSpinner, selector: "kbq-progress-spinner", inputs: ["id", "value", "mode", "size"] }, { kind: "directive", type: KbqOverflowShadowContainer, selector: "[kbqOverflowShadowContainer]", inputs: ["debounce"], exportAs: ["kbqOverflowShadowContainer"] }, { kind: "directive", type: KbqOverflowShadowTop, selector: "[kbqOverflowShadowTop]", inputs: ["kbqOverflowShadowTop", "shadow"], exportAs: ["kbqOverflowShadowTop"] }, { kind: "directive", type: KbqOverflowShadowBottom, selector: "[kbqOverflowShadowBottom]", inputs: ["kbqOverflowShadowBottom", "shadow"], exportAs: ["kbqOverflowShadowBottom"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [KbqNotificationCenterAnimations.state], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqNotificationCenterComponent, decorators: [{
             type: Component,
@@ -495,7 +495,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImpo
                         class: 'kbq-notification-center',
                         '[class.kbq-notification-center_popover]': 'popoverMode',
                         '(keydown.escape)': 'escapeHandler()'
-                    }, animations: [KbqNotificationCenterAnimations.state], preserveWhitespaces: false, template: "<div class=\"kbq-notification-center-header\">\n    <div class=\"kbq-notification-center-title\">\n        <div class=\"kbq-notification-center-title__text\">{{ localeData.notifications }}</div>\n        <button\n            #notificationSwitcher\n            kbq-button\n            class=\"kbq-notification-center-title__button\"\n            data-testid=\"kbq-notification-center-silent-mode-toggle\"\n            [kbqDropdownTriggerFor]=\"notificationSwitcherDropdown\"\n            [kbqTooltip]=\"service.silentMode.value ? localeData.doNotDisturb : localeData.showPopUpNotifications\"\n            [kbqTooltipArrow]=\"false\"\n            [kbqPlacement]=\"'right'\"\n            [kbqTooltipOffset]=\"4\"\n            [kbqStyle]=\"'transparent'\"\n            [color]=\"'contrast'\"\n        >\n            <i kbq-icon=\"{{ service.silentMode.value ? 'kbq-bell-slash_16' : 'kbq-bell_16' }}\"></i>\n        </button>\n    </div>\n    <div class=\"kbq-notification-center-toolbar\">\n        @if (!service.isEmpty) {\n            <button\n                kbq-button\n                class=\"kbq-notification-center-toolbar__button\"\n                data-testid=\"kbq-notification-center-remove-all-button\"\n                [kbqStyle]=\"'transparent'\"\n                [color]=\"'contrast'\"\n                (click)=\"service.removeAll()\"\n            >\n                <i kbq-icon=\"kbq-trash_16\"></i>\n            </button>\n\n            <kbq-divider [vertical]=\"true\" />\n        }\n\n        <button\n            kbq-button\n            class=\"kbq-notification-center-toolbar__button\"\n            data-testid=\"kbq-notification-center-close-button\"\n            [kbqStyle]=\"'transparent'\"\n            [color]=\"'contrast'\"\n            (click)=\"hide(0)\"\n        >\n            <i kbq-icon=\"kbq-xmark_16\"></i>\n        </button>\n    </div>\n</div>\n\n<div\n    #notificationCenterContainer=\"kbqOverflowShadowContainer\"\n    kbq-scrollbar\n    kbqOverflowShadowContainer\n    class=\"kbq-notification-center-container\"\n    data-testid=\"kbq-notification-center-container\"\n    [kbqOverflowShadowBottom]=\"notificationCenterContainer\"\n    [shadow]=\"'var(--kbq-shadow-overflow-normal-bottom)'\"\n    (onScroll)=\"onContainerScroll()\"\n>\n    @if (!service.errorMode.value) {\n        @if (!service.loadingMode.value) {\n            @for (group of service.groupedItems | async; track group) {\n                <div\n                    class=\"kbq-notification-center-sub-header\"\n                    data-testid=\"kbq-notification-center-group\"\n                    [kbqOverflowShadowTop]=\"$first ? notificationCenterContainer : undefined\"\n                >\n                    <div class=\"kbq-notification-center-sub-header__date\">{{ group.title }}</div>\n\n                    <button\n                        kbq-button\n                        class=\"kbq-notification-center-sub-header__button\"\n                        data-testid=\"kbq-notification-center-remove-group-button\"\n                        [kbqStyle]=\"'transparent'\"\n                        [color]=\"'contrast'\"\n                        [kbqTooltip]=\"localeData.remove\"\n                        [kbqPlacement]=\"'right'\"\n                        [kbqTooltipArrow]=\"false\"\n                        (click)=\"service.removeGroup(group)\"\n                    >\n                        <i kbq-icon=\"kbq-trash_16\"></i>\n                    </button>\n                </div>\n\n                @for (item of group.items; track item) {\n                    <kbq-notification-item [data]=\"item\" />\n                }\n            } @empty {\n                @if (!service.loadingMore.value) {\n                    <div class=\"kbq-notification-center-empty-container\" data-testid=\"kbq-notification-center-empty\">\n                        <i kbq-icon-item=\"kbq-bell_16\" [big]=\"true\" [color]=\"'contrast-fade'\"></i>\n                        {{ localeData.noNotifications }}\n                    </div>\n                }\n            }\n\n            @if (service.loadingMore.value) {\n                <div\n                    class=\"kbq-notification-center-load-more\"\n                    data-testid=\"kbq-notification-center-load-more\"\n                    role=\"status\"\n                    [attr.aria-label]=\"localeData.loadingMore\"\n                >\n                    <kbq-progress-spinner [mode]=\"'indeterminate'\" [size]=\"'compact'\" />\n                </div>\n            }\n\n            @if (service.loadMoreErrorMode.value) {\n                <div\n                    class=\"kbq-notification-center-load-more-error\"\n                    data-testid=\"kbq-notification-center-load-more-error\"\n                    role=\"alert\"\n                >\n                    {{ localeData.failedToLoadNotifications }}\n                    <button\n                        kbq-button\n                        data-testid=\"kbq-notification-center-load-more-retry-button\"\n                        [kbqStyle]=\"'transparent'\"\n                        [color]=\"'theme'\"\n                        (click)=\"retryLoadMore()\"\n                    >\n                        {{ localeData.repeat }}\n                    </button>\n                </div>\n            }\n        } @else {\n            <kbq-loader-overlay data-testid=\"kbq-notification-center-loader\" [transparent]=\"true\" />\n        }\n    } @else {\n        <div class=\"kbq-notification-center-error-container\" data-testid=\"kbq-notification-center-error\">\n            <i kbq-icon-item=\"kbq-bell_16\" [big]=\"true\" [color]=\"'error'\" [fade]=\"true\"></i>\n            {{ localeData.failedToLoadNotifications }}\n            <button\n                kbq-button\n                data-testid=\"kbq-notification-center-reload-button\"\n                [kbqStyle]=\"'transparent'\"\n                [color]=\"'theme'\"\n                (click)=\"service.onReload.emit()\"\n            >\n                {{ localeData.repeat }}\n            </button>\n        </div>\n    }\n</div>\n\n<kbq-dropdown #notificationSwitcherDropdown=\"kbqDropdown\">\n    <button\n        kbq-dropdown-item\n        data-testid=\"kbq-notification-center-show-notifications-button\"\n        (click)=\"service.setSilentMode(false)\"\n    >\n        <i kbq-icon=\"{{ !service.silentMode.value ? 'kbq-circle-xs_16' : '' }}\" [style.min-width.px]=\"16\"></i>\n        {{ localeData.showPopUpNotifications }}\n    </button>\n    <button\n        kbq-dropdown-item\n        data-testid=\"kbq-notification-center-do-not-disturb-button\"\n        (click)=\"service.setSilentMode(true)\"\n    >\n        <i kbq-icon=\"{{ service.silentMode.value ? 'kbq-circle-xs_16' : '' }}\" [style.min-width.px]=\"16\"></i>\n        {{ localeData.doNotDisturb }}\n    </button>\n</kbq-dropdown>\n", styles: [".kbq-notification-center{position:relative;display:flex;flex-direction:column;width:400px;height:100vh;box-sizing:border-box;z-index:1}.kbq-notification-center:not(.kbq-notification-center_popover){border-right:1px solid;border-left:1px solid}.kbq-notification-center.kbq-notification-center_popover{margin-top:var(--kbq-size-xxs);margin-bottom:var(--kbq-size-xxs);border-radius:var(--kbq-size-xs);height:calc(100vh - 48px);box-shadow:var(--kbq-shadow-popup)}.kbq-notification-center-header{display:flex;flex-direction:row;justify-content:space-between;padding:var(--kbq-size-m) var(--kbq-size-xl) var(--kbq-size-xxs) var(--kbq-size-xxl)}.kbq-notification-center-title{display:flex;flex-direction:row;align-items:center;gap:var(--kbq-size-xxs)}.kbq-notification-center-toolbar{display:flex;flex-direction:row;align-items:center}.kbq-notification-center-toolbar .kbq-divider.kbq-divider_vertical{height:var(--kbq-size-m)}.kbq-notification-center-sub-header{position:sticky;top:0;z-index:100;display:flex;flex-direction:row;padding:var(--kbq-size-s) var(--kbq-size-xl)}.kbq-notification-center-sub-header .kbq-notification-center-sub-header__button{position:absolute;top:0;right:var(--kbq-size-xl);display:none}.kbq-notification-center-sub-header:hover .kbq-notification-center-sub-header__button,.kbq-notification-center-sub-header:focus-within .kbq-notification-center-sub-header__button{display:flex}.kbq-notification-center-container{height:100%;border-radius:inherit;padding-bottom:var(--kbq-size-xl)}.kbq-notification-center-container [data-overlayscrollbars-viewport]{scroll-behavior:smooth}@media(prefers-reduced-motion:reduce){.kbq-notification-center-container [data-overlayscrollbars-viewport]{scroll-behavior:auto}}.kbq-notification-center-container .kbq-loader-overlay_parent{border-radius:inherit}.kbq-notification-center-load-more{display:flex;align-items:center;justify-content:center;padding:26px 0}.kbq-notification-center-load-more-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--kbq-size-xxs) var(--kbq-size-xxl);text-align:center}.kbq-notification-center-load-more-error .kbq-button{margin-top:var(--kbq-size-s)}.kbq-notification-center-empty-container,.kbq-notification-center-error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}.kbq-notification-center-empty-container .kbq-icon,.kbq-notification-center-error-container .kbq-icon{margin-bottom:var(--kbq-size-xl)}.kbq-notification-center-empty-container .kbq-button,.kbq-notification-center-error-container .kbq-button{margin-top:var(--kbq-size-s)}.kbq-notification-center,.kbq-notification-center-sub-header{background:var(--kbq-background-card)}.kbq-notification-center:not(.kbq-notification-center_popover),.kbq-notification-center-sub-header:not(.kbq-notification-center_popover){border-right-color:var(--kbq-line-contrast-less);border-left-color:var(--kbq-line-contrast-less)}.kbq-notification-center-error-container,.kbq-notification-center-load-more-error{color:var(--kbq-foreground-error)}.kbq-notification-center{font-size:var(--kbq-typography-text-normal-medium-font-size);font-style:var(--kbq-typography-text-normal-medium-font-style);font-weight:var(--kbq-typography-text-normal-medium-font-weight);line-height:var(--kbq-typography-text-normal-medium-line-height);font-family:var(--kbq-typography-text-normal-medium-font-family);text-transform:var(--kbq-typography-text-normal-medium-text-transform);font-feature-settings:var(--kbq-typography-text-normal-medium-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-medium-letter-spacing)}.kbq-notification-center-title__text{font-size:var(--kbq-typography-text-big-strong-font-size);font-style:var(--kbq-typography-text-big-strong-font-style);font-weight:var(--kbq-typography-text-big-strong-font-weight);line-height:var(--kbq-typography-text-big-strong-line-height);font-family:var(--kbq-typography-text-big-strong-font-family);text-transform:var(--kbq-typography-text-big-strong-text-transform);font-feature-settings:var(--kbq-typography-text-big-strong-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-strong-letter-spacing)}\n"] }]
+                    }, animations: [KbqNotificationCenterAnimations.state], preserveWhitespaces: false, template: "<div class=\"kbq-notification-center-header\">\n    <div class=\"kbq-notification-center-title\">\n        <div class=\"kbq-notification-center-title__text\">{{ localeData.notifications }}</div>\n        <button\n            #notificationSwitcher\n            kbq-button\n            class=\"kbq-notification-center-title__button\"\n            data-testid=\"kbq-notification-center-silent-mode-toggle\"\n            [kbqDropdownTriggerFor]=\"notificationSwitcherDropdown\"\n            [kbqTooltip]=\"service.silentMode.value ? localeData.doNotDisturb : localeData.showPopUpNotifications\"\n            [kbqTooltipArrow]=\"false\"\n            [kbqPlacement]=\"'right'\"\n            [kbqTooltipOffset]=\"4\"\n            [kbqStyle]=\"'transparent'\"\n            [color]=\"'contrast'\"\n        >\n            <i kbq-icon=\"{{ service.silentMode.value ? 'kbq-bell-slash_16' : 'kbq-bell_16' }}\"></i>\n        </button>\n    </div>\n    <div class=\"kbq-notification-center-toolbar\">\n        @if (!service.isEmpty) {\n            <button\n                kbq-button\n                class=\"kbq-notification-center-toolbar__button\"\n                data-testid=\"kbq-notification-center-remove-all-button\"\n                [kbqStyle]=\"'transparent'\"\n                [color]=\"'contrast'\"\n                (click)=\"service.removeAll()\"\n            >\n                <i kbq-icon=\"kbq-trash_16\"></i>\n            </button>\n\n            <kbq-divider [vertical]=\"true\" />\n        }\n\n        <button\n            kbq-button\n            class=\"kbq-notification-center-toolbar__button\"\n            data-testid=\"kbq-notification-center-close-button\"\n            [kbqStyle]=\"'transparent'\"\n            [color]=\"'contrast'\"\n            (click)=\"hide(0)\"\n        >\n            <i kbq-icon=\"kbq-xmark_16\"></i>\n        </button>\n    </div>\n</div>\n\n<div\n    #notificationCenterContainer=\"kbqOverflowShadowContainer\"\n    kbq-scrollbar\n    kbqOverflowShadowContainer\n    class=\"kbq-notification-center-container\"\n    data-testid=\"kbq-notification-center-container\"\n    [kbqOverflowShadowBottom]=\"notificationCenterContainer\"\n    [shadow]=\"'var(--kbq-shadow-overflow-normal-bottom)'\"\n    (onScroll)=\"onContainerScroll()\"\n>\n    @if (!service.errorMode.value) {\n        @if (!service.loadingMode.value) {\n            @for (group of service.groupedItems | async; track group) {\n                <div\n                    class=\"kbq-notification-center-sub-header\"\n                    data-testid=\"kbq-notification-center-group\"\n                    [kbqOverflowShadowTop]=\"$first ? notificationCenterContainer : undefined\"\n                >\n                    <div class=\"kbq-notification-center-sub-header__date\">{{ group.title }}</div>\n\n                    <button\n                        kbq-button\n                        class=\"kbq-notification-center-sub-header__button\"\n                        data-testid=\"kbq-notification-center-remove-group-button\"\n                        [kbqStyle]=\"'transparent'\"\n                        [color]=\"'contrast'\"\n                        [kbqTooltip]=\"localeData.remove\"\n                        [kbqPlacement]=\"'right'\"\n                        [kbqTooltipArrow]=\"false\"\n                        (click)=\"service.removeGroup(group)\"\n                    >\n                        <i kbq-icon=\"kbq-trash_16\"></i>\n                    </button>\n                </div>\n\n                @for (item of group.items; track item) {\n                    <kbq-notification-item [data]=\"item\" />\n                }\n            } @empty {\n                @if (!service.loadingMore.value) {\n                    <div class=\"kbq-notification-center-empty-container\" data-testid=\"kbq-notification-center-empty\">\n                        <i kbq-icon-item=\"kbq-bell_16\" [big]=\"true\" [color]=\"'contrast-fade'\"></i>\n                        {{ localeData.noNotifications }}\n                    </div>\n                }\n            }\n\n            @if (service.loadingMore.value) {\n                <div\n                    class=\"kbq-notification-center-load-more\"\n                    data-testid=\"kbq-notification-center-load-more\"\n                    role=\"status\"\n                    [attr.aria-label]=\"localeData.loadingMore\"\n                >\n                    <kbq-progress-spinner [mode]=\"'indeterminate'\" [size]=\"'compact'\" />\n                </div>\n            }\n\n            @if (service.loadMoreErrorMode.value) {\n                <div\n                    class=\"kbq-notification-center-load-more-error\"\n                    data-testid=\"kbq-notification-center-load-more-error\"\n                    role=\"alert\"\n                >\n                    {{ localeData.failedToLoadNotifications }}\n                    <button\n                        kbq-button\n                        data-testid=\"kbq-notification-center-load-more-retry-button\"\n                        [kbqStyle]=\"'transparent'\"\n                        [color]=\"'theme'\"\n                        (click)=\"retryLoadMore()\"\n                    >\n                        {{ localeData.repeat }}\n                    </button>\n                </div>\n            }\n        } @else {\n            <kbq-loader-overlay data-testid=\"kbq-notification-center-loader\" [card]=\"true\" />\n        }\n    } @else {\n        <div class=\"kbq-notification-center-error-container\" data-testid=\"kbq-notification-center-error\">\n            <i kbq-icon-item=\"kbq-bell_16\" [big]=\"true\" [color]=\"'error'\" [fade]=\"true\"></i>\n            {{ localeData.failedToLoadNotifications }}\n            <button\n                kbq-button\n                data-testid=\"kbq-notification-center-reload-button\"\n                [kbqStyle]=\"'transparent'\"\n                [color]=\"'theme'\"\n                (click)=\"service.onReload.emit()\"\n            >\n                {{ localeData.repeat }}\n            </button>\n        </div>\n    }\n</div>\n\n<kbq-dropdown #notificationSwitcherDropdown=\"kbqDropdown\">\n    <button\n        kbq-dropdown-item\n        data-testid=\"kbq-notification-center-show-notifications-button\"\n        (click)=\"service.setSilentMode(false)\"\n    >\n        <i kbq-icon=\"{{ !service.silentMode.value ? 'kbq-circle-xs_16' : '' }}\" [style.min-width.px]=\"16\"></i>\n        {{ localeData.showPopUpNotifications }}\n    </button>\n    <button\n        kbq-dropdown-item\n        data-testid=\"kbq-notification-center-do-not-disturb-button\"\n        (click)=\"service.setSilentMode(true)\"\n    >\n        <i kbq-icon=\"{{ service.silentMode.value ? 'kbq-circle-xs_16' : '' }}\" [style.min-width.px]=\"16\"></i>\n        {{ localeData.doNotDisturb }}\n    </button>\n</kbq-dropdown>\n", styles: [".kbq-notification-center{position:relative;display:flex;flex-direction:column;width:400px;height:100vh;box-sizing:border-box;z-index:1}.kbq-notification-center:not(.kbq-notification-center_popover){border-right:1px solid;border-left:1px solid}.kbq-notification-center.kbq-notification-center_popover{margin-top:var(--kbq-size-xxs);margin-bottom:var(--kbq-size-xxs);border-radius:var(--kbq-size-xs);height:calc(100vh - 48px);box-shadow:var(--kbq-shadow-popup)}.kbq-notification-center-header{display:flex;flex-direction:row;justify-content:space-between;padding:var(--kbq-size-m) var(--kbq-size-xl) var(--kbq-size-xxs) var(--kbq-size-xxl)}.kbq-notification-center-title{display:flex;flex-direction:row;align-items:center;gap:var(--kbq-size-xxs)}.kbq-notification-center-toolbar{display:flex;flex-direction:row;align-items:center}.kbq-notification-center-toolbar .kbq-divider.kbq-divider_vertical{height:var(--kbq-size-m)}.kbq-notification-center-sub-header{position:sticky;top:0;z-index:100;display:flex;flex-direction:row;padding:var(--kbq-size-s) var(--kbq-size-xl)}.kbq-notification-center-sub-header .kbq-notification-center-sub-header__button{position:absolute;top:0;right:var(--kbq-size-xl);display:none}.kbq-notification-center-sub-header:hover .kbq-notification-center-sub-header__button,.kbq-notification-center-sub-header:focus-within .kbq-notification-center-sub-header__button{display:flex}.kbq-notification-center-container{height:100%;border-radius:inherit;padding-bottom:var(--kbq-size-xl)}.kbq-notification-center-container [data-overlayscrollbars-viewport]{scroll-behavior:smooth}@media(prefers-reduced-motion:reduce){.kbq-notification-center-container [data-overlayscrollbars-viewport]{scroll-behavior:auto}}.kbq-notification-center-container .kbq-loader-overlay_parent{border-radius:inherit}.kbq-notification-center-load-more{display:flex;align-items:center;justify-content:center;padding:26px 0}.kbq-notification-center-load-more-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--kbq-size-xxs) var(--kbq-size-xxl);text-align:center}.kbq-notification-center-load-more-error .kbq-button{margin-top:var(--kbq-size-s)}.kbq-notification-center-empty-container,.kbq-notification-center-error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}.kbq-notification-center-empty-container .kbq-icon,.kbq-notification-center-error-container .kbq-icon{margin-bottom:var(--kbq-size-xl)}.kbq-notification-center-empty-container .kbq-button,.kbq-notification-center-error-container .kbq-button{margin-top:var(--kbq-size-s)}.kbq-notification-center,.kbq-notification-center-sub-header{background:var(--kbq-background-card)}.kbq-notification-center:not(.kbq-notification-center_popover),.kbq-notification-center-sub-header:not(.kbq-notification-center_popover){border-right-color:var(--kbq-line-contrast-less);border-left-color:var(--kbq-line-contrast-less)}.kbq-notification-center-error-container,.kbq-notification-center-load-more-error{color:var(--kbq-foreground-error)}.kbq-notification-center{font-size:var(--kbq-typography-text-normal-medium-font-size);font-style:var(--kbq-typography-text-normal-medium-font-style);font-weight:var(--kbq-typography-text-normal-medium-font-weight);line-height:var(--kbq-typography-text-normal-medium-line-height);font-family:var(--kbq-typography-text-normal-medium-font-family);text-transform:var(--kbq-typography-text-normal-medium-text-transform);font-feature-settings:var(--kbq-typography-text-normal-medium-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-medium-letter-spacing)}.kbq-notification-center-title__text{font-size:var(--kbq-typography-text-big-strong-font-size);font-style:var(--kbq-typography-text-big-strong-font-style);font-weight:var(--kbq-typography-text-big-strong-font-weight);line-height:var(--kbq-typography-text-big-strong-line-height);font-family:var(--kbq-typography-text-big-strong-font-family);text-transform:var(--kbq-typography-text-big-strong-text-transform);font-feature-settings:var(--kbq-typography-text-big-strong-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-strong-letter-spacing)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { switcher: [{ type: i0.ViewChild, args: ['notificationSwitcher', { isSignal: true }] }], scrollContainer: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqScrollbar), { isSignal: true }] }] } });
 class KbqNotificationCenterTrigger extends KbqPopUpTrigger {
     /** Number of unread notifications */