@koobiq/components 21.0.1 → 21.1.0

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

@@ -147,7 +147,7 @@ class KbqNotificationCenterService {
         /**
          * Whether there are no notifications, for the center's own view to follow.
          *
-         * @internal
+         * @docs-private
          */
         this.empty = computed(() => this.originalItems().length === 0, ...(ngDevMode ? [{ debugName: "empty" }] : /* istanbul ignore next */ []));
         this.makeGroup = (item, groups) => {
@@ -192,7 +192,7 @@ class KbqNotificationCenterService {
      * Whether a notification is read, for a view to follow: `read` is flipped in place on the consumer's object,
      * so a view handed that object is not told.
      *
-     * @internal
+     * @docs-private
      */
     isRead(item) {
         let state = this.readStates.get(item);
@@ -808,7 +808,7 @@ class KbqNotificationCenterComponent extends KbqPopUp {
             { provide: FocusTrapFactory, useClass: ConfigurableFocusTrapFactory },
             { provide: FOCUS_TRAP_INERT_STRATEGY, useClass: EmptyFocusTrapStrategy },
             { provide: KBQ_NOTIFICATION_CENTER_PANEL, useExisting: forwardRef((() => KbqNotificationCenterComponent)) }
-        ], viewQueries: [{ propertyName: "switcher", first: true, predicate: ["notificationSwitcher"], descendants: true, isSignal: true }, { propertyName: "scrollContainer", first: true, predicate: KbqScrollbarViewport, descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.KbqLocaleOverridesDirective }], ngImport: i0, template: "<!-- `display: contents` keeps the trap out of the panel's flex layout while still scoping the focus trap\nto everything the panel renders. -->\n<div class=\"kbq-notification-center__trap\" [cdkTrapFocus]=\"isTrapFocus\">\n    <div class=\"kbq-notification-center-header\">\n        <div class=\"kbq-notification-center-title\">\n            <div class=\"kbq-notification-center-title__text\" [id]=\"titleId\">\n                {{ localeConfiguration().notifications }}\n            </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                [attr.aria-label]=\"\n                    service.silentMode()\n                        ? localeConfiguration().doNotDisturb\n                        : localeConfiguration().showPopUpNotifications\n                \"\n                [kbqTooltip]=\"\n                    service.silentMode()\n                        ? localeConfiguration().doNotDisturb\n                        : localeConfiguration().showPopUpNotifications\n                \"\n                [kbqTooltipArrow]=\"false\"\n                [kbqPlacement]=\"'right'\"\n                [kbqTooltipOffset]=\"4\"\n                [kbqStyle]=\"'transparent'\"\n                [color]=\"'contrast'\"\n            >\n                <i kbq-icon=\"{{ service.silentMode() ? 'kbq-bell-slash_16' : 'kbq-bell_16' }}\"></i>\n            </button>\n        </div>\n        <div class=\"kbq-notification-center-toolbar\">\n            @if (!service.empty()) {\n                <button\n                    kbq-button\n                    class=\"kbq-notification-center-toolbar__button\"\n                    data-testid=\"kbq-notification-center-remove-all-button\"\n                    [attr.aria-label]=\"a11yLocaleConfiguration().removeAll\"\n                    [kbqStyle]=\"'transparent'\"\n                    [color]=\"'contrast'\"\n                    [kbqTooltip]=\"localeConfiguration().removeAll\"\n                    [kbqPlacement]=\"'bottom'\"\n                    [kbqTooltipArrow]=\"false\"\n                    (click)=\"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                [attr.aria-label]=\"a11yLocaleConfiguration().close\"\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    <!-- One persistent live region for the whole panel: a region inserted together with its text is\n    not reliably announced, so only the text below ever changes. -->\n    <div class=\"cdk-visually-hidden\" data-testid=\"kbq-notification-center-status\" role=\"status\" aria-live=\"polite\">\n        {{ statusMessage }}\n    </div>\n\n    <div\n        #notificationCenterContainer=\"kbqOverflowShadowContainer\"\n        kbqScrollbarViewport\n        kbqOverflowShadowContainer\n        class=\"kbq-notification-center-container\"\n        data-testid=\"kbq-notification-center-container\"\n        [class.kbq-animations-disabled]=\"animationsDisabled\"\n        [kbqOverflowShadowBottom]=\"notificationCenterContainer\"\n        [shadow]=\"'var(--kbq-shadow-overflow-normal-bottom)'\"\n    >\n        @if (!service.errorMode()) {\n            @if (!service.loadingMode()) {\n                @for (group of service.groupedItems(); track group.id) {\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                            [attr.aria-label]=\"localeConfiguration().remove\"\n                            [kbqStyle]=\"'transparent'\"\n                            [color]=\"'contrast'\"\n                            [kbqTooltip]=\"localeConfiguration().remove\"\n                            [kbqPlacement]=\"'right'\"\n                            [kbqTooltipArrow]=\"false\"\n                            (click)=\"removeGroup(group)\"\n                        >\n                            <i kbq-icon=\"kbq-trash_16\"></i>\n                        </button>\n                    </div>\n\n                    @for (item of group.items; track item.id) {\n                        <kbq-notification-item [data]=\"item\" />\n                    }\n                } @empty {\n                    @if (!service.loadingMore() && !service.loadMoreErrorMode()) {\n                        <div\n                            class=\"kbq-notification-center-empty-container\"\n                            data-testid=\"kbq-notification-center-empty\"\n                        >\n                            <i kbq-icon-item=\"kbq-bell_16\" [big]=\"true\" [color]=\"'contrast-fade'\"></i>\n                            {{ localeConfiguration().noNotifications }}\n                        </div>\n                    }\n                }\n\n                @if (service.loadingMore()) {\n                    <div class=\"kbq-notification-center-load-more\" data-testid=\"kbq-notification-center-load-more\">\n                        <kbq-progress-spinner [mode]=\"'indeterminate'\" [size]=\"'compact'\" />\n                    </div>\n                } @else if (service.loadMoreErrorMode()) {\n                    <div\n                        class=\"kbq-notification-center-load-more-error\"\n                        data-testid=\"kbq-notification-center-load-more-error\"\n                    >\n                        {{ localeConfiguration().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                            {{ localeConfiguration().repeat }}\n                        </button>\n                    </div>\n                }\n            } @else {\n                <kbq-loader-overlay data-testid=\"kbq-notification-center-loader\" />\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                {{ localeConfiguration().failedToLoadNotifications }}\n                <button\n                    kbq-button\n                    data-testid=\"kbq-notification-center-reload-button\"\n                    [kbqStyle]=\"'transparent'\"\n                    [color]=\"'theme'\"\n                    (click)=\"service.onReload.next()\"\n                >\n                    {{ localeConfiguration().repeat }}\n                </button>\n            </div>\n        }\n    </div>\n\n    <!-- `class` is KbqDropdown's own input: it moves the class onto the panel rendered in the overlay,\n    which is where the check-mark width token has to be declared to reach the marks. -->\n    <kbq-dropdown #notificationSwitcherDropdown=\"kbqDropdown\" class=\"kbq-notification-center-switcher\">\n        <button\n            kbq-dropdown-item\n            data-testid=\"kbq-notification-center-show-notifications-button\"\n            (click)=\"service.setSilentMode(false)\"\n        >\n            <i\n                class=\"kbq-notification-center-switcher__mark\"\n                kbq-icon=\"kbq-circle-xs_16\"\n                [class.kbq-notification-center-switcher__mark_hidden]=\"service.silentMode()\"\n            ></i>\n            {{ localeConfiguration().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\n                class=\"kbq-notification-center-switcher__mark\"\n                kbq-icon=\"kbq-circle-xs_16\"\n                [class.kbq-notification-center-switcher__mark_hidden]=\"!service.silentMode()\"\n            ></i>\n            {{ localeConfiguration().doNotDisturb }}\n        </button>\n    </kbq-dropdown>\n</div>\n", styles: [".kbq-notification-center{position:relative;display:flex;flex-direction:column;width:var(--kbq-notification-center-size-container-width);height:var(--kbq-notification-center-popover-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-notification-center-size-container-border-radius)}@supports (corner-shape: squircle){.kbq-notification-center.kbq-notification-center_popover{corner-shape:squircle;border-radius:clamp(var(--kbq-notification-center-size-container-border-radius) * 1.85,var(--kbq-notification-center-size-container-border-radius) * 2.3 - 3.6px,var(--kbq-notification-center-size-container-border-radius) * 2)}}.kbq-notification-center.kbq-notification-center_popover{height:var(--kbq-notification-center-popover-height, calc(100vh - var(--kbq-notification-center-size-navbar-height)));box-shadow:var(--kbq-notification-center-container-shadow)}.kbq-notification-center__trap{display:contents}.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-switcher__mark{min-width:var(--kbq-notification-center-size-switcher-mark-width)}.kbq-notification-center-switcher__mark.kbq-notification-center-switcher__mark_hidden{visibility:hidden}.kbq-notification-center-sub-header{position:sticky;top:0;z-index:var(--kbq-notification-center-sub-header-z-index);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:flex;opacity:0;pointer-events: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{opacity:1;pointer-events:auto}.kbq-notification-center-container{--kbq-scrollbar-track-z-index: calc(var(--kbq-notification-center-sub-header-z-index) + 1);height:100%;overflow:auto;border-radius:inherit;corner-shape:inherit;padding-bottom:var(--kbq-size-xl);scroll-padding-top:var(--kbq-notification-center-size-sub-header-height);scroll-behavior:smooth}.kbq-notification-center-container.kbq-animations-disabled{scroll-behavior:auto}@media(prefers-reduced-motion:reduce){.kbq-notification-center-container{scroll-behavior:auto}}.kbq-notification-center-container .kbq-loader-overlay_parent{border-radius:inherit;corner-shape:inherit}.kbq-notification-center-load-more{display:flex;align-items:center;justify-content:center;padding:var(--kbq-notification-center-size-load-more-padding-vertical) 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{background:var(--kbq-notification-center-container-background)}.kbq-notification-center:not(.kbq-notification-center_popover){border-right-color:var(--kbq-notification-center-container-border-color);border-left-color:var(--kbq-notification-center-container-border-color)}.kbq-notification-center-sub-header{background:var(--kbq-notification-center-container-background)}.kbq-notification-center-error-container,.kbq-notification-center-load-more-error{color:var(--kbq-notification-center-error-text-color)}.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", ".kbq-notification-center{--kbq-notification-center-size-container-width: 400px;--kbq-notification-center-size-navbar-height: var(--kbq-size-5xl);--kbq-notification-center-size-container-border-radius: var(--kbq-size-xs);--kbq-notification-center-sub-header-z-index: 2;--kbq-notification-center-size-sub-header-height: calc(var(--kbq-size-s) * 2 + var(--kbq-size-xl));--kbq-notification-center-size-item-icon-padding-top: calc(var(--kbq-size-m) + var(--kbq-size-3xs));--kbq-notification-center-size-item-time-padding-left: calc(var(--kbq-size-xl) + var(--kbq-size-3xs));--kbq-notification-center-size-load-more-padding-vertical: calc(var(--kbq-size-xxl) + var(--kbq-size-3xs));--kbq-notification-center-container-background: var(--kbq-background-card);--kbq-notification-center-container-border-color: var(--kbq-line-contrast-less);--kbq-notification-center-container-shadow: var(--kbq-shadow-popup);--kbq-notification-center-error-text-color: var(--kbq-foreground-error)}.kbq-notification-center-switcher{--kbq-notification-center-size-switcher-mark-width: var(--kbq-size-l)}\n"], dependencies: [{ kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2.KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }, { kind: "component", type: i2.KbqIconItem, selector: "[kbq-icon-item]", inputs: ["kbq-icon-item", "fade", "big"] }, { kind: "ngmodule", type: KbqBadgeModule }, { kind: "directive", type: KbqScrollbarViewport, selector: "[kbqScrollbarViewport]", inputs: ["kbqScrollbarMode", "kbqScrollbarHideDelay"] }, { 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", "decorative", "length"] }, { kind: "ngmodule", type: KbqDropdownModule }, { kind: "component", type: i5.KbqDropdown, selector: "kbq-dropdown", inputs: ["activeDescendantNavigation", "navigationWithWrap", "xPosition", "yPosition", "overlapTriggerY", "overlapTriggerX", "hasBackdrop", "class", "backdropClass", "panelWidth", "panelMinWidth", "panelMaxWidth", "safeArea"], outputs: ["xPositionChange", "yPositionChange", "overlapTriggerYChange", "overlapTriggerXChange", "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", "kbqDropdownTriggerOrigin", "kbqDropdownTriggerAutoFocus", "kbqDropdownTriggerRestoreFocus", "kbqDropdownTriggerFor"], outputs: ["offsetXChange", "openByArrowDownChange", "kbqDropdownTriggerRestoreFocusChange", "dropdownOpened", "dropdownClosed"], exportAs: ["kbqDropdownTrigger"] }, { kind: "ngmodule", type: KbqToolTipModule }, { kind: "directive", type: i6.KbqTooltipTrigger, selector: "[kbqTooltip]", inputs: ["kbqTooltipScrollStrategy", "forDisabledComponent", "ignoreTooltipPointerEvents", "kbqTooltipSingleInstance", "kbqTrigger", "hideWithTimeout", "kbqEnterDelay", "kbqLeaveDelay", "kbqRelativeToPointer", "kbqRelativeToCaret", "kbqRelativeToCaretVertical", "kbqTooltip", "kbqTooltipHeader", "kbqTooltipModifier", "kbqTooltipContext", "kbqTooltipClass", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipOffset", "kbqTooltipDisabled", "kbqPlacementPriority", "kbqPlacement", "kbqVisible"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { 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", "surface", "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "switcher", first: true, predicate: ["notificationSwitcher"], descendants: true, isSignal: true }, { propertyName: "scrollContainer", first: true, predicate: KbqScrollbarViewport, descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.KbqLocaleOverridesDirective }], ngImport: i0, template: "<!-- `display: contents` keeps the trap out of the panel's flex layout while still scoping the focus trap\nto everything the panel renders. -->\n<div class=\"kbq-notification-center__trap\" [cdkTrapFocus]=\"isTrapFocus\">\n    <div class=\"kbq-notification-center-header\">\n        <div class=\"kbq-notification-center-title\">\n            <div class=\"kbq-notification-center-title__text\" [id]=\"titleId\">\n                {{ localeConfiguration().notifications }}\n            </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                [attr.aria-label]=\"\n                    service.silentMode()\n                        ? localeConfiguration().doNotDisturb\n                        : localeConfiguration().showPopUpNotifications\n                \"\n                [kbqTooltip]=\"\n                    service.silentMode()\n                        ? localeConfiguration().doNotDisturb\n                        : localeConfiguration().showPopUpNotifications\n                \"\n                [kbqTooltipArrow]=\"false\"\n                [kbqPlacement]=\"'right'\"\n                [kbqTooltipOffset]=\"4\"\n                [kbqStyle]=\"'transparent'\"\n                [color]=\"'contrast'\"\n            >\n                <i kbq-icon=\"{{ service.silentMode() ? 'kbq-bell-slash_16' : 'kbq-bell_16' }}\"></i>\n            </button>\n        </div>\n        <div class=\"kbq-notification-center-toolbar\">\n            @if (!service.empty()) {\n                <button\n                    kbq-button\n                    class=\"kbq-notification-center-toolbar__button\"\n                    data-testid=\"kbq-notification-center-remove-all-button\"\n                    [attr.aria-label]=\"a11yLocaleConfiguration().removeAll\"\n                    [kbqStyle]=\"'transparent'\"\n                    [color]=\"'contrast'\"\n                    [kbqTooltip]=\"localeConfiguration().removeAll\"\n                    [kbqPlacement]=\"'bottom'\"\n                    [kbqTooltipArrow]=\"false\"\n                    (click)=\"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                [attr.aria-label]=\"a11yLocaleConfiguration().close\"\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    <!-- One persistent live region for the whole panel: a region inserted together with its text is\n    not reliably announced, so only the text below ever changes. -->\n    <div class=\"cdk-visually-hidden\" data-testid=\"kbq-notification-center-status\" role=\"status\" aria-live=\"polite\">\n        {{ statusMessage }}\n    </div>\n\n    <div\n        #notificationCenterContainer=\"kbqOverflowShadowContainer\"\n        kbqScrollbarViewport\n        kbqOverflowShadowContainer\n        class=\"kbq-notification-center-container\"\n        data-testid=\"kbq-notification-center-container\"\n        [class.kbq-animations-disabled]=\"animationsDisabled\"\n        [kbqOverflowShadowBottom]=\"notificationCenterContainer\"\n        [shadow]=\"'var(--kbq-shadow-overflow-normal-bottom)'\"\n    >\n        @if (!service.errorMode()) {\n            @if (!service.loadingMode()) {\n                @for (group of service.groupedItems(); track group.id) {\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                            [attr.aria-label]=\"localeConfiguration().remove\"\n                            [kbqStyle]=\"'transparent'\"\n                            [color]=\"'contrast'\"\n                            [kbqTooltip]=\"localeConfiguration().remove\"\n                            [kbqPlacement]=\"'right'\"\n                            [kbqTooltipArrow]=\"false\"\n                            (click)=\"removeGroup(group)\"\n                        >\n                            <i kbq-icon=\"kbq-trash_16\"></i>\n                        </button>\n                    </div>\n\n                    @for (item of group.items; track item.id) {\n                        <kbq-notification-item [data]=\"item\" />\n                    }\n                } @empty {\n                    @if (!service.loadingMore() && !service.loadMoreErrorMode()) {\n                        <div\n                            class=\"kbq-notification-center-empty-container\"\n                            data-testid=\"kbq-notification-center-empty\"\n                        >\n                            <i kbq-icon-item=\"kbq-bell_16\" [big]=\"true\" [color]=\"'contrast-fade'\"></i>\n                            {{ localeConfiguration().noNotifications }}\n                        </div>\n                    }\n                }\n\n                @if (service.loadingMore()) {\n                    <div class=\"kbq-notification-center-load-more\" data-testid=\"kbq-notification-center-load-more\">\n                        <kbq-progress-spinner [mode]=\"'indeterminate'\" [size]=\"'compact'\" />\n                    </div>\n                } @else if (service.loadMoreErrorMode()) {\n                    <div\n                        class=\"kbq-notification-center-load-more-error\"\n                        data-testid=\"kbq-notification-center-load-more-error\"\n                    >\n                        {{ localeConfiguration().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                            {{ localeConfiguration().repeat }}\n                        </button>\n                    </div>\n                }\n            } @else {\n                <kbq-loader-overlay surface=\"card\" data-testid=\"kbq-notification-center-loader\" />\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                {{ localeConfiguration().failedToLoadNotifications }}\n                <button\n                    kbq-button\n                    data-testid=\"kbq-notification-center-reload-button\"\n                    [kbqStyle]=\"'transparent'\"\n                    [color]=\"'theme'\"\n                    (click)=\"service.onReload.next()\"\n                >\n                    {{ localeConfiguration().repeat }}\n                </button>\n            </div>\n        }\n    </div>\n\n    <!-- `class` is KbqDropdown's own input: it moves the class onto the panel rendered in the overlay,\n    which is where the check-mark width token has to be declared to reach the marks. -->\n    <kbq-dropdown #notificationSwitcherDropdown=\"kbqDropdown\" class=\"kbq-notification-center-switcher\">\n        <button\n            kbq-dropdown-item\n            data-testid=\"kbq-notification-center-show-notifications-button\"\n            (click)=\"service.setSilentMode(false)\"\n        >\n            <i\n                class=\"kbq-notification-center-switcher__mark\"\n                kbq-icon=\"kbq-circle-xs_16\"\n                [class.kbq-notification-center-switcher__mark_hidden]=\"service.silentMode()\"\n            ></i>\n            {{ localeConfiguration().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\n                class=\"kbq-notification-center-switcher__mark\"\n                kbq-icon=\"kbq-circle-xs_16\"\n                [class.kbq-notification-center-switcher__mark_hidden]=\"!service.silentMode()\"\n            ></i>\n            {{ localeConfiguration().doNotDisturb }}\n        </button>\n    </kbq-dropdown>\n</div>\n", styles: [".kbq-notification-center{position:relative;display:flex;flex-direction:column;width:var(--kbq-notification-center-size-container-width);height:var(--kbq-notification-center-popover-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-notification-center-size-container-border-radius)}@supports (corner-shape: squircle){.kbq-notification-center.kbq-notification-center_popover{corner-shape:squircle;border-radius:clamp(var(--kbq-notification-center-size-container-border-radius) * 1.85,var(--kbq-notification-center-size-container-border-radius) * 2.3 - 3.6px,var(--kbq-notification-center-size-container-border-radius) * 2)}}.kbq-notification-center.kbq-notification-center_popover{height:var(--kbq-notification-center-popover-height, calc(100vh - var(--kbq-notification-center-size-navbar-height)));box-shadow:var(--kbq-notification-center-container-shadow)}.kbq-notification-center__trap{display:contents}.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-switcher__mark{min-width:var(--kbq-notification-center-size-switcher-mark-width)}.kbq-notification-center-switcher__mark.kbq-notification-center-switcher__mark_hidden{visibility:hidden}.kbq-notification-center-sub-header{position:sticky;top:0;z-index:var(--kbq-notification-center-sub-header-z-index);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:flex;opacity:0;pointer-events: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{opacity:1;pointer-events:auto}.kbq-notification-center-container{--kbq-scrollbar-track-z-index: calc(var(--kbq-notification-center-sub-header-z-index) + 1);height:100%;overflow:auto;border-radius:inherit;corner-shape:inherit;padding-bottom:var(--kbq-size-xl);scroll-padding-top:var(--kbq-notification-center-size-sub-header-height);scroll-behavior:smooth}.kbq-notification-center-container.kbq-animations-disabled{scroll-behavior:auto}@media(prefers-reduced-motion:reduce){.kbq-notification-center-container{scroll-behavior:auto}}.kbq-notification-center-container .kbq-loader-overlay_parent{border-radius:inherit;corner-shape:inherit}.kbq-notification-center-load-more{display:flex;align-items:center;justify-content:center;padding:var(--kbq-notification-center-size-load-more-padding-vertical) 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{background:var(--kbq-notification-center-container-background)}.kbq-notification-center:not(.kbq-notification-center_popover){border-right-color:var(--kbq-notification-center-container-border-color);border-left-color:var(--kbq-notification-center-container-border-color)}.kbq-notification-center-sub-header{background:var(--kbq-notification-center-container-background)}.kbq-notification-center-error-container,.kbq-notification-center-load-more-error{color:var(--kbq-notification-center-error-text-color)}.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", ".kbq-notification-center{--kbq-notification-center-size-container-width: 400px;--kbq-notification-center-size-navbar-height: var(--kbq-size-5xl);--kbq-notification-center-size-container-border-radius: var(--kbq-size-xs);--kbq-notification-center-sub-header-z-index: 2;--kbq-notification-center-size-sub-header-height: calc(var(--kbq-size-s) * 2 + var(--kbq-size-xl));--kbq-notification-center-size-item-icon-padding-top: calc(var(--kbq-size-m) + var(--kbq-size-3xs));--kbq-notification-center-size-item-time-padding-left: calc(var(--kbq-size-xl) + var(--kbq-size-3xs));--kbq-notification-center-size-load-more-padding-vertical: calc(var(--kbq-size-xxl) + var(--kbq-size-3xs));--kbq-notification-center-container-background: var(--kbq-background-card);--kbq-notification-center-container-border-color: var(--kbq-line-contrast-less);--kbq-notification-center-container-shadow: var(--kbq-shadow-popup);--kbq-notification-center-error-text-color: var(--kbq-foreground-error)}.kbq-notification-center-switcher{--kbq-notification-center-size-switcher-mark-width: var(--kbq-size-l)}\n"], dependencies: [{ kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2.KbqIcon, selector: "[kbq-icon]", inputs: ["aria-hidden", "iconSize", "autoColor", "kbq-icon"] }, { kind: "component", type: i2.KbqIconItem, selector: "[kbq-icon-item]", inputs: ["kbq-icon-item", "fade", "big"] }, { kind: "ngmodule", type: KbqBadgeModule }, { kind: "directive", type: KbqScrollbarViewport, selector: "[kbqScrollbarViewport]", inputs: ["kbqScrollbarMode", "kbqScrollbarHideDelay"] }, { 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", "decorative", "length"] }, { kind: "ngmodule", type: KbqDropdownModule }, { kind: "component", type: i5.KbqDropdown, selector: "kbq-dropdown", inputs: ["activeDescendantNavigation", "navigationWithWrap", "xPosition", "yPosition", "overlapTriggerY", "overlapTriggerX", "hasBackdrop", "class", "backdropClass", "panelWidth", "panelMinWidth", "panelMaxWidth", "safeArea"], outputs: ["xPositionChange", "yPositionChange", "overlapTriggerYChange", "overlapTriggerXChange", "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", "kbqDropdownTriggerOrigin", "kbqDropdownTriggerAutoFocus", "kbqDropdownTriggerRestoreFocus", "kbqDropdownTriggerFor"], outputs: ["offsetXChange", "openByArrowDownChange", "kbqDropdownTriggerRestoreFocusChange", "dropdownOpened", "dropdownClosed"], exportAs: ["kbqDropdownTrigger"] }, { kind: "ngmodule", type: KbqToolTipModule }, { kind: "directive", type: i6.KbqTooltipTrigger, selector: "[kbqTooltip]", inputs: ["kbqTooltipScrollStrategy", "forDisabledComponent", "ignoreTooltipPointerEvents", "kbqTooltipSingleInstance", "kbqTrigger", "hideWithTimeout", "kbqEnterDelay", "kbqLeaveDelay", "kbqRelativeToPointer", "kbqRelativeToCaret", "kbqRelativeToCaretVertical", "kbqTooltip", "kbqTooltipHeader", "kbqTooltipModifier", "kbqTooltipContext", "kbqTooltipClass", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipArrowCentered", "kbqTooltipOffset", "kbqTooltipDisabled", "kbqPlacementPriority", "kbqPlacement", "kbqVisible"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { 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", "surface", "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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: KbqNotificationCenterComponent, decorators: [{
             type: Component,
@@ -840,7 +840,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImpo
                         '[attr.aria-labelledby]': 'titleId',
                         '[class.kbq-notification-center_popover]': 'popoverMode',
                         '(keydown.escape)': 'escapeHandler($any($event))'
-                    }, hostDirectives: [KbqLocaleOverridesDirective], preserveWhitespaces: false, template: "<!-- `display: contents` keeps the trap out of the panel's flex layout while still scoping the focus trap\nto everything the panel renders. -->\n<div class=\"kbq-notification-center__trap\" [cdkTrapFocus]=\"isTrapFocus\">\n    <div class=\"kbq-notification-center-header\">\n        <div class=\"kbq-notification-center-title\">\n            <div class=\"kbq-notification-center-title__text\" [id]=\"titleId\">\n                {{ localeConfiguration().notifications }}\n            </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                [attr.aria-label]=\"\n                    service.silentMode()\n                        ? localeConfiguration().doNotDisturb\n                        : localeConfiguration().showPopUpNotifications\n                \"\n                [kbqTooltip]=\"\n                    service.silentMode()\n                        ? localeConfiguration().doNotDisturb\n                        : localeConfiguration().showPopUpNotifications\n                \"\n                [kbqTooltipArrow]=\"false\"\n                [kbqPlacement]=\"'right'\"\n                [kbqTooltipOffset]=\"4\"\n                [kbqStyle]=\"'transparent'\"\n                [color]=\"'contrast'\"\n            >\n                <i kbq-icon=\"{{ service.silentMode() ? 'kbq-bell-slash_16' : 'kbq-bell_16' }}\"></i>\n            </button>\n        </div>\n        <div class=\"kbq-notification-center-toolbar\">\n            @if (!service.empty()) {\n                <button\n                    kbq-button\n                    class=\"kbq-notification-center-toolbar__button\"\n                    data-testid=\"kbq-notification-center-remove-all-button\"\n                    [attr.aria-label]=\"a11yLocaleConfiguration().removeAll\"\n                    [kbqStyle]=\"'transparent'\"\n                    [color]=\"'contrast'\"\n                    [kbqTooltip]=\"localeConfiguration().removeAll\"\n                    [kbqPlacement]=\"'bottom'\"\n                    [kbqTooltipArrow]=\"false\"\n                    (click)=\"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                [attr.aria-label]=\"a11yLocaleConfiguration().close\"\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    <!-- One persistent live region for the whole panel: a region inserted together with its text is\n    not reliably announced, so only the text below ever changes. -->\n    <div class=\"cdk-visually-hidden\" data-testid=\"kbq-notification-center-status\" role=\"status\" aria-live=\"polite\">\n        {{ statusMessage }}\n    </div>\n\n    <div\n        #notificationCenterContainer=\"kbqOverflowShadowContainer\"\n        kbqScrollbarViewport\n        kbqOverflowShadowContainer\n        class=\"kbq-notification-center-container\"\n        data-testid=\"kbq-notification-center-container\"\n        [class.kbq-animations-disabled]=\"animationsDisabled\"\n        [kbqOverflowShadowBottom]=\"notificationCenterContainer\"\n        [shadow]=\"'var(--kbq-shadow-overflow-normal-bottom)'\"\n    >\n        @if (!service.errorMode()) {\n            @if (!service.loadingMode()) {\n                @for (group of service.groupedItems(); track group.id) {\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                            [attr.aria-label]=\"localeConfiguration().remove\"\n                            [kbqStyle]=\"'transparent'\"\n                            [color]=\"'contrast'\"\n                            [kbqTooltip]=\"localeConfiguration().remove\"\n                            [kbqPlacement]=\"'right'\"\n                            [kbqTooltipArrow]=\"false\"\n                            (click)=\"removeGroup(group)\"\n                        >\n                            <i kbq-icon=\"kbq-trash_16\"></i>\n                        </button>\n                    </div>\n\n                    @for (item of group.items; track item.id) {\n                        <kbq-notification-item [data]=\"item\" />\n                    }\n                } @empty {\n                    @if (!service.loadingMore() && !service.loadMoreErrorMode()) {\n                        <div\n                            class=\"kbq-notification-center-empty-container\"\n                            data-testid=\"kbq-notification-center-empty\"\n                        >\n                            <i kbq-icon-item=\"kbq-bell_16\" [big]=\"true\" [color]=\"'contrast-fade'\"></i>\n                            {{ localeConfiguration().noNotifications }}\n                        </div>\n                    }\n                }\n\n                @if (service.loadingMore()) {\n                    <div class=\"kbq-notification-center-load-more\" data-testid=\"kbq-notification-center-load-more\">\n                        <kbq-progress-spinner [mode]=\"'indeterminate'\" [size]=\"'compact'\" />\n                    </div>\n                } @else if (service.loadMoreErrorMode()) {\n                    <div\n                        class=\"kbq-notification-center-load-more-error\"\n                        data-testid=\"kbq-notification-center-load-more-error\"\n                    >\n                        {{ localeConfiguration().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                            {{ localeConfiguration().repeat }}\n                        </button>\n                    </div>\n                }\n            } @else {\n                <kbq-loader-overlay data-testid=\"kbq-notification-center-loader\" />\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                {{ localeConfiguration().failedToLoadNotifications }}\n                <button\n                    kbq-button\n                    data-testid=\"kbq-notification-center-reload-button\"\n                    [kbqStyle]=\"'transparent'\"\n                    [color]=\"'theme'\"\n                    (click)=\"service.onReload.next()\"\n                >\n                    {{ localeConfiguration().repeat }}\n                </button>\n            </div>\n        }\n    </div>\n\n    <!-- `class` is KbqDropdown's own input: it moves the class onto the panel rendered in the overlay,\n    which is where the check-mark width token has to be declared to reach the marks. -->\n    <kbq-dropdown #notificationSwitcherDropdown=\"kbqDropdown\" class=\"kbq-notification-center-switcher\">\n        <button\n            kbq-dropdown-item\n            data-testid=\"kbq-notification-center-show-notifications-button\"\n            (click)=\"service.setSilentMode(false)\"\n        >\n            <i\n                class=\"kbq-notification-center-switcher__mark\"\n                kbq-icon=\"kbq-circle-xs_16\"\n                [class.kbq-notification-center-switcher__mark_hidden]=\"service.silentMode()\"\n            ></i>\n            {{ localeConfiguration().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\n                class=\"kbq-notification-center-switcher__mark\"\n                kbq-icon=\"kbq-circle-xs_16\"\n                [class.kbq-notification-center-switcher__mark_hidden]=\"!service.silentMode()\"\n            ></i>\n            {{ localeConfiguration().doNotDisturb }}\n        </button>\n    </kbq-dropdown>\n</div>\n", styles: [".kbq-notification-center{position:relative;display:flex;flex-direction:column;width:var(--kbq-notification-center-size-container-width);height:var(--kbq-notification-center-popover-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-notification-center-size-container-border-radius)}@supports (corner-shape: squircle){.kbq-notification-center.kbq-notification-center_popover{corner-shape:squircle;border-radius:clamp(var(--kbq-notification-center-size-container-border-radius) * 1.85,var(--kbq-notification-center-size-container-border-radius) * 2.3 - 3.6px,var(--kbq-notification-center-size-container-border-radius) * 2)}}.kbq-notification-center.kbq-notification-center_popover{height:var(--kbq-notification-center-popover-height, calc(100vh - var(--kbq-notification-center-size-navbar-height)));box-shadow:var(--kbq-notification-center-container-shadow)}.kbq-notification-center__trap{display:contents}.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-switcher__mark{min-width:var(--kbq-notification-center-size-switcher-mark-width)}.kbq-notification-center-switcher__mark.kbq-notification-center-switcher__mark_hidden{visibility:hidden}.kbq-notification-center-sub-header{position:sticky;top:0;z-index:var(--kbq-notification-center-sub-header-z-index);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:flex;opacity:0;pointer-events: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{opacity:1;pointer-events:auto}.kbq-notification-center-container{--kbq-scrollbar-track-z-index: calc(var(--kbq-notification-center-sub-header-z-index) + 1);height:100%;overflow:auto;border-radius:inherit;corner-shape:inherit;padding-bottom:var(--kbq-size-xl);scroll-padding-top:var(--kbq-notification-center-size-sub-header-height);scroll-behavior:smooth}.kbq-notification-center-container.kbq-animations-disabled{scroll-behavior:auto}@media(prefers-reduced-motion:reduce){.kbq-notification-center-container{scroll-behavior:auto}}.kbq-notification-center-container .kbq-loader-overlay_parent{border-radius:inherit;corner-shape:inherit}.kbq-notification-center-load-more{display:flex;align-items:center;justify-content:center;padding:var(--kbq-notification-center-size-load-more-padding-vertical) 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{background:var(--kbq-notification-center-container-background)}.kbq-notification-center:not(.kbq-notification-center_popover){border-right-color:var(--kbq-notification-center-container-border-color);border-left-color:var(--kbq-notification-center-container-border-color)}.kbq-notification-center-sub-header{background:var(--kbq-notification-center-container-background)}.kbq-notification-center-error-container,.kbq-notification-center-load-more-error{color:var(--kbq-notification-center-error-text-color)}.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", ".kbq-notification-center{--kbq-notification-center-size-container-width: 400px;--kbq-notification-center-size-navbar-height: var(--kbq-size-5xl);--kbq-notification-center-size-container-border-radius: var(--kbq-size-xs);--kbq-notification-center-sub-header-z-index: 2;--kbq-notification-center-size-sub-header-height: calc(var(--kbq-size-s) * 2 + var(--kbq-size-xl));--kbq-notification-center-size-item-icon-padding-top: calc(var(--kbq-size-m) + var(--kbq-size-3xs));--kbq-notification-center-size-item-time-padding-left: calc(var(--kbq-size-xl) + var(--kbq-size-3xs));--kbq-notification-center-size-load-more-padding-vertical: calc(var(--kbq-size-xxl) + var(--kbq-size-3xs));--kbq-notification-center-container-background: var(--kbq-background-card);--kbq-notification-center-container-border-color: var(--kbq-line-contrast-less);--kbq-notification-center-container-shadow: var(--kbq-shadow-popup);--kbq-notification-center-error-text-color: var(--kbq-foreground-error)}.kbq-notification-center-switcher{--kbq-notification-center-size-switcher-mark-width: var(--kbq-size-l)}\n"] }]
+                    }, hostDirectives: [KbqLocaleOverridesDirective], preserveWhitespaces: false, template: "<!-- `display: contents` keeps the trap out of the panel's flex layout while still scoping the focus trap\nto everything the panel renders. -->\n<div class=\"kbq-notification-center__trap\" [cdkTrapFocus]=\"isTrapFocus\">\n    <div class=\"kbq-notification-center-header\">\n        <div class=\"kbq-notification-center-title\">\n            <div class=\"kbq-notification-center-title__text\" [id]=\"titleId\">\n                {{ localeConfiguration().notifications }}\n            </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                [attr.aria-label]=\"\n                    service.silentMode()\n                        ? localeConfiguration().doNotDisturb\n                        : localeConfiguration().showPopUpNotifications\n                \"\n                [kbqTooltip]=\"\n                    service.silentMode()\n                        ? localeConfiguration().doNotDisturb\n                        : localeConfiguration().showPopUpNotifications\n                \"\n                [kbqTooltipArrow]=\"false\"\n                [kbqPlacement]=\"'right'\"\n                [kbqTooltipOffset]=\"4\"\n                [kbqStyle]=\"'transparent'\"\n                [color]=\"'contrast'\"\n            >\n                <i kbq-icon=\"{{ service.silentMode() ? 'kbq-bell-slash_16' : 'kbq-bell_16' }}\"></i>\n            </button>\n        </div>\n        <div class=\"kbq-notification-center-toolbar\">\n            @if (!service.empty()) {\n                <button\n                    kbq-button\n                    class=\"kbq-notification-center-toolbar__button\"\n                    data-testid=\"kbq-notification-center-remove-all-button\"\n                    [attr.aria-label]=\"a11yLocaleConfiguration().removeAll\"\n                    [kbqStyle]=\"'transparent'\"\n                    [color]=\"'contrast'\"\n                    [kbqTooltip]=\"localeConfiguration().removeAll\"\n                    [kbqPlacement]=\"'bottom'\"\n                    [kbqTooltipArrow]=\"false\"\n                    (click)=\"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                [attr.aria-label]=\"a11yLocaleConfiguration().close\"\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    <!-- One persistent live region for the whole panel: a region inserted together with its text is\n    not reliably announced, so only the text below ever changes. -->\n    <div class=\"cdk-visually-hidden\" data-testid=\"kbq-notification-center-status\" role=\"status\" aria-live=\"polite\">\n        {{ statusMessage }}\n    </div>\n\n    <div\n        #notificationCenterContainer=\"kbqOverflowShadowContainer\"\n        kbqScrollbarViewport\n        kbqOverflowShadowContainer\n        class=\"kbq-notification-center-container\"\n        data-testid=\"kbq-notification-center-container\"\n        [class.kbq-animations-disabled]=\"animationsDisabled\"\n        [kbqOverflowShadowBottom]=\"notificationCenterContainer\"\n        [shadow]=\"'var(--kbq-shadow-overflow-normal-bottom)'\"\n    >\n        @if (!service.errorMode()) {\n            @if (!service.loadingMode()) {\n                @for (group of service.groupedItems(); track group.id) {\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                            [attr.aria-label]=\"localeConfiguration().remove\"\n                            [kbqStyle]=\"'transparent'\"\n                            [color]=\"'contrast'\"\n                            [kbqTooltip]=\"localeConfiguration().remove\"\n                            [kbqPlacement]=\"'right'\"\n                            [kbqTooltipArrow]=\"false\"\n                            (click)=\"removeGroup(group)\"\n                        >\n                            <i kbq-icon=\"kbq-trash_16\"></i>\n                        </button>\n                    </div>\n\n                    @for (item of group.items; track item.id) {\n                        <kbq-notification-item [data]=\"item\" />\n                    }\n                } @empty {\n                    @if (!service.loadingMore() && !service.loadMoreErrorMode()) {\n                        <div\n                            class=\"kbq-notification-center-empty-container\"\n                            data-testid=\"kbq-notification-center-empty\"\n                        >\n                            <i kbq-icon-item=\"kbq-bell_16\" [big]=\"true\" [color]=\"'contrast-fade'\"></i>\n                            {{ localeConfiguration().noNotifications }}\n                        </div>\n                    }\n                }\n\n                @if (service.loadingMore()) {\n                    <div class=\"kbq-notification-center-load-more\" data-testid=\"kbq-notification-center-load-more\">\n                        <kbq-progress-spinner [mode]=\"'indeterminate'\" [size]=\"'compact'\" />\n                    </div>\n                } @else if (service.loadMoreErrorMode()) {\n                    <div\n                        class=\"kbq-notification-center-load-more-error\"\n                        data-testid=\"kbq-notification-center-load-more-error\"\n                    >\n                        {{ localeConfiguration().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                            {{ localeConfiguration().repeat }}\n                        </button>\n                    </div>\n                }\n            } @else {\n                <kbq-loader-overlay surface=\"card\" data-testid=\"kbq-notification-center-loader\" />\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                {{ localeConfiguration().failedToLoadNotifications }}\n                <button\n                    kbq-button\n                    data-testid=\"kbq-notification-center-reload-button\"\n                    [kbqStyle]=\"'transparent'\"\n                    [color]=\"'theme'\"\n                    (click)=\"service.onReload.next()\"\n                >\n                    {{ localeConfiguration().repeat }}\n                </button>\n            </div>\n        }\n    </div>\n\n    <!-- `class` is KbqDropdown's own input: it moves the class onto the panel rendered in the overlay,\n    which is where the check-mark width token has to be declared to reach the marks. -->\n    <kbq-dropdown #notificationSwitcherDropdown=\"kbqDropdown\" class=\"kbq-notification-center-switcher\">\n        <button\n            kbq-dropdown-item\n            data-testid=\"kbq-notification-center-show-notifications-button\"\n            (click)=\"service.setSilentMode(false)\"\n        >\n            <i\n                class=\"kbq-notification-center-switcher__mark\"\n                kbq-icon=\"kbq-circle-xs_16\"\n                [class.kbq-notification-center-switcher__mark_hidden]=\"service.silentMode()\"\n            ></i>\n            {{ localeConfiguration().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\n                class=\"kbq-notification-center-switcher__mark\"\n                kbq-icon=\"kbq-circle-xs_16\"\n                [class.kbq-notification-center-switcher__mark_hidden]=\"!service.silentMode()\"\n            ></i>\n            {{ localeConfiguration().doNotDisturb }}\n        </button>\n    </kbq-dropdown>\n</div>\n", styles: [".kbq-notification-center{position:relative;display:flex;flex-direction:column;width:var(--kbq-notification-center-size-container-width);height:var(--kbq-notification-center-popover-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-notification-center-size-container-border-radius)}@supports (corner-shape: squircle){.kbq-notification-center.kbq-notification-center_popover{corner-shape:squircle;border-radius:clamp(var(--kbq-notification-center-size-container-border-radius) * 1.85,var(--kbq-notification-center-size-container-border-radius) * 2.3 - 3.6px,var(--kbq-notification-center-size-container-border-radius) * 2)}}.kbq-notification-center.kbq-notification-center_popover{height:var(--kbq-notification-center-popover-height, calc(100vh - var(--kbq-notification-center-size-navbar-height)));box-shadow:var(--kbq-notification-center-container-shadow)}.kbq-notification-center__trap{display:contents}.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-switcher__mark{min-width:var(--kbq-notification-center-size-switcher-mark-width)}.kbq-notification-center-switcher__mark.kbq-notification-center-switcher__mark_hidden{visibility:hidden}.kbq-notification-center-sub-header{position:sticky;top:0;z-index:var(--kbq-notification-center-sub-header-z-index);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:flex;opacity:0;pointer-events: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{opacity:1;pointer-events:auto}.kbq-notification-center-container{--kbq-scrollbar-track-z-index: calc(var(--kbq-notification-center-sub-header-z-index) + 1);height:100%;overflow:auto;border-radius:inherit;corner-shape:inherit;padding-bottom:var(--kbq-size-xl);scroll-padding-top:var(--kbq-notification-center-size-sub-header-height);scroll-behavior:smooth}.kbq-notification-center-container.kbq-animations-disabled{scroll-behavior:auto}@media(prefers-reduced-motion:reduce){.kbq-notification-center-container{scroll-behavior:auto}}.kbq-notification-center-container .kbq-loader-overlay_parent{border-radius:inherit;corner-shape:inherit}.kbq-notification-center-load-more{display:flex;align-items:center;justify-content:center;padding:var(--kbq-notification-center-size-load-more-padding-vertical) 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{background:var(--kbq-notification-center-container-background)}.kbq-notification-center:not(.kbq-notification-center_popover){border-right-color:var(--kbq-notification-center-container-border-color);border-left-color:var(--kbq-notification-center-container-border-color)}.kbq-notification-center-sub-header{background:var(--kbq-notification-center-container-background)}.kbq-notification-center-error-container,.kbq-notification-center-load-more-error{color:var(--kbq-notification-center-error-text-color)}.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", ".kbq-notification-center{--kbq-notification-center-size-container-width: 400px;--kbq-notification-center-size-navbar-height: var(--kbq-size-5xl);--kbq-notification-center-size-container-border-radius: var(--kbq-size-xs);--kbq-notification-center-sub-header-z-index: 2;--kbq-notification-center-size-sub-header-height: calc(var(--kbq-size-s) * 2 + var(--kbq-size-xl));--kbq-notification-center-size-item-icon-padding-top: calc(var(--kbq-size-m) + var(--kbq-size-3xs));--kbq-notification-center-size-item-time-padding-left: calc(var(--kbq-size-xl) + var(--kbq-size-3xs));--kbq-notification-center-size-load-more-padding-vertical: calc(var(--kbq-size-xxl) + var(--kbq-size-3xs));--kbq-notification-center-container-background: var(--kbq-background-card);--kbq-notification-center-container-border-color: var(--kbq-line-contrast-less);--kbq-notification-center-container-shadow: var(--kbq-shadow-popup);--kbq-notification-center-error-text-color: var(--kbq-foreground-error)}.kbq-notification-center-switcher{--kbq-notification-center-size-switcher-mark-width: var(--kbq-size-l)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { switcher: [{ type: i0.ViewChild, args: ['notificationSwitcher', { isSignal: true }] }], scrollContainer: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqScrollbarViewport), { isSignal: true }] }] } });
 class KbqNotificationCenterTrigger extends KbqPopUpTrigger {
     /** Number of unread notifications, formatted for the trigger badge. */